v3

by dapo

HTML

<script src="https://gistcdn.githack.com/dasDaniel/f3cebc1274339055729c6e887ca8d2ad/raw/8f0432bfd812c453cdecee61862963fe3e24119a/vue.global.js"></script>
<div id="app"></div>

<template id="appTemplate">
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
  <pre>{{ state }}</pre>
  <my-component :count="state.count"></my-component>
</template>

<template id="myComponent">
  <div>
    Child
    <pre>{{ state }}</pre>
  </div>
</template>

CSS

div {
  border: 1px dotted #999;
  padding: 8px;
}

JavaScript

const {
  reactive,
  computed,
} = Vue;

const MyComponent = Vue.createComponent({
  props: {
    count: Number
  },
  setup(props) {
    const state = reactive({
      count: computed(() => props.count),
      triple: computed(() => props.count * 3)
    });

    return {
      state,
    }
  },
  template: document.getElementById('myComponent').innerHTML
});

const App = {
  setup(props) {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    });

    function increment() {
      state.count++;
    }

    return {
      state,
      increment
    };
  },
  template: document.getElementById('appTemplate').innerHTML
};

const app = Vue.createApp({});
app.component('my-component', MyComponent)
app.mount(App, "#app");