Vue2 Starter

ES6 + Vue.js jsFiddle Starter Template by Christian Gambardella http://gambardella.info/2016/11/03/jsfiddle-starter-for-vue-js/

by kahiro okina

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app" style="overflow: scroll">
{{ allow }}<br>
{{ normal }}<br>
{{ allow2 }}<br>
{{ normal2 }}<br>
</div>

Babel + JSX

const store = new Vue({
	name: 'store',
	data() {
  	return {
    	state: {
        message: 3939
      },
    }
  },
  watch: {
  	state: {
      handler() {
        console.log('do not insert value!')
      },
    	deep: true,
    },
  },
  render() {},
})

function helloworld() {
	return `${store.state.message} hello`;
}

const helloworld2 = () => `${store.state.message} hello 2`;

new Vue({
  computed: {
    allow: () => ({
      hoge: {
        fuga: helloworld()
      }
    }),
    normal() {
      return {
        hoge: {
          fuga: helloworld()
        }
      }
    },
    allow2: () => ({
      hoge: {
        fuga: helloworld2()
      }
    }),
    normal2() {
      return {
        hoge: {
          fuga: helloworld2()
        }
      }
    },
  }
}).$mount('#app')

setInterval(() => {
  store.state.message += 100
}, 1000)