VueのComponentの基本構造とSampleTemplate

<template>
  <div>
    <h2>Sample_Template</h2>
  </div>
</template>
<script>
// Import_Zone
export default {
  name: 'SampleComponent',
  components: {},
  props: {
    title: {
      type: String,
      default: 'ロボ玉の冒険',
      required: true,
    },
    titleStyle: {
      type: Object,
      default: () => {
        return {}
      },
    },
    list: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  methods: {},
  // LifeCycleHook: CreatedTiming
  created() {
    // Data & Props を確認する
    console.log('this.$data', this.$data)
    console.log('this.$props', this.$props)
    // Vuexを導入している場合は、Store.Stateを確認して必要なものを取得する
    console.log('this.$store.state', this.$store.state)
  },
  // LifeCycleHook: MountedTiming
  mounted() {},
}
</script>
<style scoped>
/* Style_定義 */
</style>