kusa-mochi

export default {
  data: () => ({
    count: 0
  }),
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {

kusa-mochi

<template><!--省略--></template>

<script>
import useCounter from "./useCounter";
export default {
  setup() {
    const { count, double, increment } = useCounter();
    return {
      count,
      double,

kusa-mochi

import { reactive, computed } from "vue";
export default function {
  const state = reactive({
    count: 0,
    double: computed(() => state.count * 2)
  });
  function increment() {
    state.count++;
  }
  return {

kusa-mochi

<template>
    <!-- 省略 -->
<template>
<script>
import { reactive, computed } from "vue";
export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)

kusa-mochi

<template>
  <button @click="increment">
    <div>Count: {{ count }}</div>
    <div>Double: {{ double }}</div>
  </button>
<template>
<script>
export default {
  data: () => ({
    count: 0

kusa-mochi

<template>
    <!-- 省略 -->
</template>

<script>
import CommonFunction from "./CommonFunction";
export default {
    name: 'MyComponent',
    methods: {
        CommonFunction

kusa-mochi

export default function () {
  // ここに共通処理を書く。
}

kusa-mochi

<my-component>
  <div>コンポーネントの外側から挿入したい要素</div>
<my-component>

kusa-mochi

<template>
    <div>
        <div>サンプル</div>
        <slot />
    </div>
</template>

<script>
export default {
    name: 'MyComponent'

kusa-mochi

<!-- template A と表示する。 -->
<my-component sampleProp="1"></my-component>

<!-- template B と表示する。 -->
<my-component sampleProp="2"></my-component>