title: VueJS: Updating component collection data from its child
body: <p>Given Todo list with filtering:</p>
  
  <p>list.vue:</p>
  
  <pre><code>&lt;script&gt;
  import TodoItem from './todo_item.vue';
  export default {
    components: { TodoItem },
    props: ['selectePriority'],
    data: {
      items: [
        { name: 'Do shopping', priority: 'high' },
        { name: 'Play games', priority: 'low' }
      ]
    },
    computed: {
      selectedItems: function() {
        if(this.selectedPriority == 'all') {
          return this.items;
        } else {
          var selectedPriority = this.selectedPriority;
          return this.items.filter(function(item) {
            return item.priority == selectedPriority
          });
        }
      }
    },
  }
  &lt;/script&gt;
  
  &lt;template&gt;
    &lt;div&gt;
      &lt;select v-model="selectedPriority"&gt;
        &lt;option value="all"&gt;All&lt;/option&gt;
        &lt;option value="low"&gt;Low&lt;/option&gt;
        &lt;option value="high"&gt;High&lt;/option&gt;
      &lt;/select&gt;
      &lt;todo-item
        v-for="item in selectedItems"
        :name="item.name"
        :priority="item.priority"
      /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>todo_item.vue:</p>
  
  <pre><code>&lt;script&gt;
  export default {
    props: ['name', 'priority']
  }
  &lt;/script&gt;
  &lt;template&gt;
    &lt;div&gt;
      &lt;p&gt;{{ name }}&lt;/p&gt;
      &lt;select v-model="priority"&gt;
        &lt;option value="low"&gt;Low&lt;/option&gt;
        &lt;option value="high"&gt;High&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;list /&gt;
  </code></pre>
  
  <p>Now, when for example filter is set to <code>all</code>, I change <code>Play games</code> to priority <code>high</code> and change filter to <code>high</code>, I will see only <code>Do shopping</code>, as priority was not updated in <code>items</code> collection and it was re-rendered.</p>
  
  <p>What is proper way to update collection data from child components in Vue.js?</p>