title: use the same form for create and read operation
body: <p>I have a master and a child component. The child component persists the data for the create mode as well as the edit mode. The child has a data section as follows which is being used when the component is in create mode</p>
  
  <pre><code> data() {
              return {
                  title: '',
                  description: '',
                  organizer: '',
                  startdate: '',
                  enddate: '',
                  email: '',
                  phone: ''
              }
          },
  </code></pre>
  
  <p>and my inputs in create mode are as follows</p>
  
  <pre><code>&lt;input type="text" placeholder="enter event title here" class="form-control"  v-model="title"&gt;
  </code></pre>
  
  <p>In the edit mode, I am updating a prop value on the client as follows, which is</p>
  
  <pre><code>props:['currentevent']
  </code></pre>
  
  <p>The value of the currentevent is being passed from the master component to the child component and is also the value that is currently being edited. </p>
  
  <p>so, the complete code for handling an input value looks like as follows</p>
  
  <pre><code>&lt;input type="text" placeholder="enter event title here" class="form-control" v-if="currentevent" :value="currentevent.title"&gt;
  
  &lt;input type="text" placeholder="enter event title here" class="form-control" v-else v-model="title"&gt;
  </code></pre>
  
  <p>and in my save method (in the child component), I am checking if currentevent is empty or not. If it is empty then I trigger the add code otherwise, I trigger the update code.</p>
  
  <p>Question : This works , but I have a large form and having to do this for each and every component is not a clean design . Can you please let me know what should I be doing ? </p>