title: Using v-model with a prop on VUE.JS
body: <p>I'm trying to use a data coming from a prop with v-model, the following code works, but with a warning.</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
         &lt;b-form-input v-model="value" @change="postPost()"&gt;&lt;/b-form-input&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      import axios from 'axios';
      export default {
          props: {
              value: String
          },
          methods: {
              postPost() {
                  axios.put('/trajectory/inclination', {
                      body: this.value
                  })
                      .then(response =&gt; {
                      })
                      .catch(e =&gt; {
                          this.errors.push(e)
                      })
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>The warning says:</p>
  
  <p><strong>"Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"</strong></p>
  
  <p>So I changed and now I'm using a data as the warning says.</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
         &lt;b-form-input v-model="_value" @change="postPost()"&gt;&lt;/b-form-input&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      import axios from 'axios';
  
      export default {
          props: {
              value: String
          },
          data() {
              return {
                  _value: this.value
              }
          },
          methods: {
              postPost() {
                  axios.put('/trajectory/inclination', {
                      body: this._value
                  })
                      .then(response =&gt; {
                      })
                      .catch(e =&gt; {
                          this.errors.push(e)
                      })
              }
          }
      }
  </code></pre>
  
  <p>So now the code it's not working and the warning says:</p>
  
  <p><strong>"Property or method "_value" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option"</strong></p>
  
  <p>Any idea how to fix the first code to suppress the warning? (or some idea on how to fix the second code?)</p>
  
  <p>Obs.: b-form-input it's not my componente, this is the Textual Input from Boostrap-Vue (<a href="https://bootstrap-vue.js.org/docs/components/form-input/" rel="noreferrer">Doc for b-form-input</a>)</p>