Property Binding & Sync in vue.js
<p>I'm having trouble syncing my properties in vue.js, I have an 'active' property that I want to set to the value of each instance 'plan', but at the same time I would like to sync the property with the parent, with no luck. What am I doing wrong ?</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
    &lt;title&gt;Bootstrap Vue&lt;/title&gt;
    &lt;link rel="stylesheet prefetch" href="http://bootswatch.com/paper/bootstrap.min.css"&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class="container"&gt;
      &lt;div id="app"&gt;
        &lt;pre&gt;
          @{{ $data | json}}
        &lt;/pre&gt;
        &lt;div v-for="plan in plans"&gt;
          &lt;plan :active.sync="active" :plan.sync="plan"&gt;&lt;/plan&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;

  &lt;template id="plan_template"&gt;
      &lt;div&gt;
        &lt;span &gt;@{{ plan.name }}&lt;/span&gt;
        &lt;span &gt;@{{ plan.price }}/month&lt;/span&gt;
        &lt;button @click="setActivePlan" class="btn btn-primary btn-xs"&gt;UPGRADE&lt;/button&gt;
      &lt;/div&gt;
  &lt;/template&gt; 

  &lt;script&gt;
    new Vue({
      el:'#app',
      data:{
        plans:[
          {name:'Executive',price:100},
          {name:'Professional',price:50},
          {name:'Personal',price:30},
          {name:'Free',price:0}
        ],
        active:{},

      },

      components:{
        plan:{
          template:'#plan_template',

          props:['plan', 'active'],

          methods:{
            setActivePlan:function(){
              this.active=this.plan;
            }
          }
        }
      }
    });
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>