title: Two way data binding between parent and child
body: <p>I'm learning VueJS and am trying to build a simple app where you can list, view, create, edit and delete stories. Stories are simply a title, content (just text) and a datetime. I managed to get view, list, create and delete working and am currently building the edit part.</p>
  <p>For the edit part I thought it would be nice if I could reuse the form I use for creation. The idea is that when the user clicks the &quot;edit button&quot; (of a story in a list of stories) that the story is replaced by a prefilled form.</p>
  <p>I've tried implementing this but with v-model but get the following error</p>
  <pre><code>[Vue warn]: Error in render: &quot;TypeError: Cannot read property 'title' of undefined&quot;
  
  found in
  
  ---&gt; &lt;StoriesForm&gt; at src/components/StoryForm.vue
         &lt;Stories&gt; at src/components/Stories.vue
           &lt;StoriesApp&gt; at src/App.vue
             &lt;Root&gt;
  </code></pre>
  <p>My Stories.vue:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;b-modal id=&quot;delete_story_modal&quot;&gt;Delete?&lt;/b-modal&gt;
      &lt;b-container&gt;
        &lt;b-card v-for=&quot;story in stories&quot; v-bind:key=&quot;story.id&quot; :title=&quot;story.title&quot;&gt;
        &lt;b-card-text&gt;&lt;router-link :to=&quot;{ path: '/'+ story.id + '/'}&quot;&gt;{{ story.content }}&lt;/router-link&gt;&lt;/b-card-text&gt;
        &lt;b-card-text&gt;{{ story.datetime }}&lt;/b-card-text&gt;
          &lt;b-button @click=&quot;editStory(story.id)&quot;&gt;Edit&lt;/b-button&gt;
          &lt;b-button @click=&quot;deleteStory(story.id)&quot;&gt;Delete&lt;/b-button&gt;
        &lt;/b-card&gt;
        &lt;b-button @click=&quot;showForm&quot; id=&quot;add_button&quot; v-if=&quot;!add_story&quot;&gt;Add story&lt;/b-button&gt;
      &lt;/b-container&gt;
      &lt;StoryForm v-if=&quot;add_story&quot; v-model=&quot;story&quot; /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import StoryForm from './StoryForm'
  
  export default {
    name: 'Stories',
    components: {
      StoryForm
    },
    data () {
      return {
        story: {
          title: '',
          content: '',
          datetime: ''
        },
        add_story: false,
        stories: []
      }
    },
    beforeMount () {
      this.getStories()
    },
    methods: {
      async getStories () {
        // ajax request, get data, parse it, fill it
        this.stories = stories_parsed
      },
      showForm () {
        this.add_story = true;
      },
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>And StoryForm.vue</p>
  <pre><code>&lt;template&gt;
    &lt;b-container&gt;
      &lt;b-card&gt;
        &lt;form
          id=&quot;add_story&quot;
          action=&quot;http://localhost:8000&quot;
          method=&quot;post&quot;
          @submit.prevent=&quot;addStory&quot;&gt;
  
          &lt;b-alert v-model=&quot;error&quot;&gt;{{ error_msg }}&lt;/b-alert&gt;
  
          &lt;b-form-input
            v-model=&quot;story.title&quot;
            required
            placeholder=&quot;Enter title&quot;
          &gt;&lt;/b-form-input&gt;
        
          &lt;b-form-textarea
            v-model=&quot;story.content&quot;
            placeholder=&quot;Enter story&quot;
          &gt;&lt;/b-form-textarea&gt;
  
          &lt;b-button type=&quot;submit&quot;&gt;Submit&lt;/b-button&gt;
        &lt;/form&gt;
      &lt;/b-card&gt;
    &lt;/b-container&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'Stories-form',
    props: {
      story: {
        type: Object,
        required: true
      },
    },
    components: {},
    data () {
      return {
        error: false,
        error_msg: &quot;no success sadly&quot;
      }
    },
    methods: {
      async addStory () {
        ...
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>Since this didn't work I searched and found this: <a href="https://stackoverflow.com/questions/60406259/how-to-update-parent-v-model-using-child-components-prop">How to update parent v-model using child components&#39; prop?</a></p>
  <p>But couldn't get that to work either.</p>