Why Vue binding does not work in a sample? - vue.js

Question

Please have a look at example
http://jsfiddle.net/g77uv054/
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.10.5/vue.min.js"></script>
<div id="todo">
<h1>My Test</h1>
Sample 1 <span v-text="form.title"></span>
Sample 2 <b><span v-text="'' +form.title"></span></b>
</div>
<script>
var form = new Vue({
data: {
title: "My Form"
}
});
var app = new Vue({
el: '#todo',
data: {
form : form
}
})
</script>
For some reason, binding in "Sample 1" does not show nothing and Sample 2 works fine. Can someone please explain why adding '' to string makes any difference ?

Answer 1

I don't believe you can use a vue instance inside another vue instance.
Normally you either define form as a component or as a class.
I attached fiddles for the two approaches:
http://jsfiddle.net/DarkFruits/g77uv054/1/
<div id="todo">
<h1>My Test</h1>
Sample 1<span v-text="form.title"></span><br/>
Sample 2<span v-text="'' +form.title"></span>
</div>
class form {
constructor() {
this.title = 'My Form'
}
}
var app = new Vue({
el: '#todo',
data: {
form : new form()
}
})
http://jsfiddle.net/DarkFruits/g77uv054/2/
<template id="my-form">
<span v-text='title'></span>
</template>
<div id="todo">
<h1>My Test</h1>
Sample 1<my-form v-bind:title='title'></my-form><br/>
</div>
Vue.component('my-form', {
template: '#my-form',
props: ['title']
})
var app = new Vue({
el: '#todo',
data: {
title : 'My Form'
}
})
Edit:
FYI, in the second fiddle I removed vue as an external resource and added it in the javascript settings. This also gives you better error messages in the console.