title: Vue reactivity, prevent re-rendering component on prop update with input v-model
body: <p>I am trying to workout how I can mutate a prop in a text input without causing the component to re-render.</p>
  <p>Here is my code</p>
  <pre><code>//App.vue
  
  &lt;template&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;category-component v-for=&quot;category in categories&quot; :key=&quot;category.title&quot; :category=&quot;category&quot; /&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  
  export default {
    name: &quot;App&quot;,
    data() {
      return {
        categories: [
          {
            title: &quot;Cat 1&quot;,
            description: &quot;description&quot;
          },
          {
            title: &quot;Cat 2&quot;,
            description: &quot;description&quot;
          },
          {
            title: &quot;Cat 3&quot;,
            description: &quot;description&quot;
          }
        ]
      };
    },
    components: {
      CategoryComponent
    }
  }
  </code></pre>
  <pre><code>// CategoryComponent.vue
  
  &lt;template&gt;
      &lt;div&gt;
          &lt;input type=&quot;text&quot; v-model=&quot;category.title&quot;&gt;
          &lt;br&gt;
          &lt;textarea v-model=&quot;category.description&quot;&gt;&lt;/textarea&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>When I update the text input, the component re-renders and I lose focus. However, when I update the textarea, it does not re-render.</p>
  <p>Can anyone shed any light on this? I am obviously missing something simple with vue reactivity.</p>
  <p>Here is a basic <a href="https://codesandbox.io/s/1-lc222" rel="nofollow noreferrer">codesandbox</a> of my issue.</p>