title: 'v-model' directives cannot update the iteration variable itself
body: <p>I read an article about <a href="https://adamwathan.me/renderless-components-in-vuejs/" rel="noreferrer">Renderless Components</a>,it split a component into a presentational component (<strong>view</strong> part) and a renderless component(<strong>logical</strong> part) via $scopedSlots property.Here is a simple Tag component. when you press enter , you'll add a new tag </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://vuejs.org/js/vue.js"&gt;&lt;/script&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="app"&gt;
      &lt;custom-component v-model="tags"&gt;
        &lt;div slot-scope="{tags,addTag,newTag}"&gt;
          &lt;span v-for="tag in tags"&gt;
            {{tag}}
          &lt;/span&gt;
          &lt;input type="text" @keydown.enter.prevent="addTag" v-model="newTag"&gt;
        &lt;/div&gt;
      &lt;/custom-component&gt;
    &lt;/div&gt;
  
     &lt;script&gt;
       Vue.component('custom-component',{
          props:['value'],
          data(){
            return {
              newTag:''
            }
          },
          methods:{
            addTag(){
              this.$emit('input',[...this.value,this.newTag])      
              this.newTag = ''
            }
          },
          render(h){
            return this.$scopedSlots.default({
              tags:this.value,
              addTag:this.addTag,
              newTag:this.newTag
            })
          }
        })
  
  
        new Vue({
          el:'#app',
          data:{
          tags:[
           'Test',
           'Design'
           ]
          }
        })
  
  
  
     &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  
  <p>But,<strong>it doesn't work</strong>,it seems that the newTag always is ''(empty string), when I use SPA way,
  the emulator says "'v-model' directives cannot update the iteration variable 'newTag' itself" ,Here is <a href="http://js.jirengu.com/peyisexewe/1/edit?html,js" rel="noreferrer">demo on jsbin</a>  </p>
  
  <p>The solution is , as mentioned in the article ,use :value attribute binding, and an @input event binding ,instead of v-model. demo on jsbin</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://vuejs.org/js/vue.js"&gt;&lt;/script&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="app"&gt;
      &lt;custom-component v-model="tags"&gt;
        &lt;div slot-scope="{tags,addTag,inputAttrs,inputEvents}"&gt;
          &lt;span v-for="tag in tags"&gt;
            {{tag}}
          &lt;/span&gt;
          &lt;input type="text" v-bind="inputAttrs" v-on="inputEvents"&gt;
        &lt;/div&gt;
      &lt;/custom-component&gt;
    &lt;/div&gt;
  
     &lt;script&gt;
       Vue.component('custom-component',{
         props:['value'],
         data(){
           return {
             newTag:''
           }
         },
         methods:{
           addTag(){
            this.$emit('input',[...this.value,this.newTag])
            this.newTag = ''
           }
         },
         render(h){
           return this.$scopedSlots.default({
             tags:this.value,
             addTag:this.addTag,
             inputAttrs:{
               value:this.newTag
             },
             inputEvents:{
               input:(e) =&gt; {
                 this.newTag = e.target.value
               },
               keydown:(e) =&gt; {
                 if(e.keyCode === 13){
                 e.preventDefault()
                 this.addTag()
             }
           }
          }
        })
       }
      })
  
  
      new Vue({
       el:'#app',
       data:{
         tags:[
          'Test',
          'Design'
         ]
       }
     })
  
  
  
     &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  
  <p>I don't know why v-model doesn't work.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Questions above have been answered clearly, while I got another question after I read a reference link, and still v-model doesn't work question</p>
  
  <pre><code>
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://vuejs.org/js/vue.js"&gt;&lt;/script&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="app"&gt;
    &lt;base-test v-slot="sp"&gt;
      &lt;input type="text" v-model="sp.foo"&gt;
      &lt;div&gt;{{ sp}}&lt;/div&gt;
    &lt;/base-test&gt;
  &lt;/div&gt;
  &lt;script&gt;
    Vue.component('base-test', {
    template: `
    &lt;div&gt;
      &lt;slot :foo="foo"&gt;&lt;/slot&gt;
    &lt;/div&gt;
    `,
    data(){
      return{
        foo: 'Bar',
      }
    }
  });
  
  
  // Mount
  new Vue({
    el: '#app',
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  
  <p>As we can see, sp is an object. why v-model seems to be not working this time? </p>