title: Why is the Vue.js input value not updating?
body: <p>I have a Vue.js <code>text-input</code> component like the following:</p>
  
  <pre><code>&lt;template&gt;
      &lt;input
          type="text"
          :id="name"
          :name="name"
          v-model="inputValue"
      &gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: ['name', 'value'],
          data: function () {
              return {
                  inputValue: this.value
              };
          },
          watch: {
              inputValue: function () {
                  eventBus.$emit('inputChanged', {
                      type: 'text',
                      name: this.name,
                      value: this.inputValue
                  });
              }
          }
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>And I am using that <code>text-input</code> in another component as follows:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li v-for="row in rows" :key="row.id"&gt;
          &lt;text-input :name="row.name" :value="row.value"&gt;
          &lt;/text-input&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Then, within the JS of the component using <code>text-input</code>, I have code like the following for removing <code>li</code> rows:</p>
  
  <pre><code>this.rows = this.rows.filter((row, i) =&gt; i !== idx);
  </code></pre>
  
  <p>The <code>filter</code> method is properly removing the row that has an index of <code>idx</code> from the <code>rows</code> array, and in the parent component, I can confirm that the row is indeed gone, however, if I have, for example, two rows, the first with a value of <code>1</code> and the second with a value of <code>2</code>, and then I delete the first row, even though the remaining row has a value of <code>2</code>, I am still seeing <code>1</code> in the text input.</p>
  
  <p>Why? I don't understand why Vue.js is not updating the value of the text input, even though the value of <code>value</code> is clearly changing from <code>1</code> to <code>2</code>, and I can confirm that in the parent component.</p>
  
  <p>Maybe I'm just not understanding how Vue.js and <code>v-model</code> work, but it seems like the value of the text input should update. Any advice/explanation would be greatly appreciated. Thank you.</p>