Vue - passing data with props

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="app">
<div>
    <button type="button" @click="toggle = !toggle" v-model="toggle">   
       transition
    </button> 
    <transition name="settings">
        <div v-if="!toggle">
           <span>{{toggle}}</span>
           <msg-box :msg="msg"></msg-box>
        </div>
    </transition>
</div>
</div>

CSS

.settings-leave-active {
  transition: all .5s;
  margin-left: 10px;
}

.settings-leave {
  margin-left: 0px;
}

.settings-enter-active{
  transition: all .5s;
  margin-left: 10px;
}
.settings-enter{
  margin-left: 0px;
}

JavaScript

Vue.component('msg-box', {
    props: ['msg'],
    template: '<span>{{ msg }}</span>'
})

var appVM = new Vue({
    el: '#app',
    data: {
        toggle: false,
        msg: 'as'
    }
});