title: VueJS how to update data on selection
body: <p>In a VueJS 2.0 I want to update the rendering of items using a v-for directive when a selection changes.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;main&gt;
   {{ testvalue }}
    &lt;select v-model="selected.name"&gt;
      &lt;option v-for="foo in foobar"&gt;{{foo.name}}&lt;/option&gt;
    &lt;/select&gt;
    &lt;span&gt;Selected: {{ selected.name }}&lt;/span&gt;
    &lt;div v-for="(value, key) in selected.properties"&gt;
      &lt;p&gt;{{ key }} {{ value }}&lt;/p&gt;
    &lt;/div&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>new Vue({
      el: 'main',
      data: {
          foobar: [
        { name: 'rex', type: 'dog', properties: [{color: 'red', sound: 'load'}] },
        { name: 'tike', type: 'cat', properties: [{color: 'brown', sound: 'quiet'}] }, 
        { name: 'tiny', type, 'mouse', properties: [{color: 'white', sound: 'quiet'}]}
        ],
        selected: { name: 'tiny', type, 'mouse', properties: [{color: 'white', sound: 'quiet'}]},
        testvalue: 'Test'
      },
      created: function () {
          this.selected = this.foobar[0];
      },
      mounted: function () {
          this.selected = this.foobar[1];
      }
  })
  </code></pre>
  
  <p>jsfiddle here:  <a href="https://jsfiddle.net/doritonimo/u1n8x97e/" rel="nofollow noreferrer">https://jsfiddle.net/doritonimo/u1n8x97e/</a></p>
  
  <p>The v-for directive does not update when the selected object it is getting it's data from changes. Is there a way to tell the v-for loop to update when data changes in Vue?</p>