Design in the browser, activity 12: update StyleGuideView.vue

StyleGuideView.vue

<section>
  <div class="details">
    <h1>Cafe Card</h1>
    <p>The cafe card shows information about a specific cafe including a description, hours, and the cafe's location.</p>
    <!-- 
      v-model directive connects our 'cafe' object to the contents of the text area with what is called 
      a two-way binding, meaning that changes made in the textarea update the 'cafe' object, and that changes 
      to the 'cafe' object also update the contents of the textarea.
    -->
    <textarea v-model="cafe | json"></textarea>
  </div>
  <div class="component">
    <!-- 
      'cafe' is defined in the <script> section of this component, but because of the two-way binding,
      updates made to content in the text area, update the the 'cafe' object, which then in turn
      updates our component.
    -->
    <cafe-card :cafe="cafe"></cafe-card>
  </div>
</section>