title: Vuejs dynamically added ref undefined
body: <p>I'm trying to create a little data editor. A click handler will add an child item inside a parent category like so:</p>
  
  <pre><code>methods: {
    addBlank: function(parentKey){
    var obj = {}
    obj.id = Math.floor((Math.random() * 99999) + 1)
    obj.name = "New Item"
    obj.data1 = 9
    obj.data2 = 9
    obj.data3 = 9
  
    this.categories[0].children.push(obj)
  
    console.log("New ref is:",obj.id)
    console.log(this.$refs)  // new $ref is available
    console.log("I can't select it",this.$refs[obj.id]) //returns undefined
    console.log("But I can select others",this.$refs['4214234']) //this is ok
    }
  }
  </code></pre>
  
  <p>Codepen example: <a href="https://codepen.io/Kay_Wolfe/pen/xJEVRW" rel="nofollow noreferrer">https://codepen.io/Kay_Wolfe/pen/xJEVRW</a></p>
  
  <p>How come <code>this.$refs[obj.id]</code> return underfined when its there? </p>