Property or method “X” is not defined on the instanceエラーの解決策

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // messageが定義されていない
    };
  }
};
</script>

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    };
  }
};
</script>

<template>
  <button @click="greet">Click me</button>
</template>

<script>
export default {
  methods: {
    greet() {
      console.log('Hello, Vue!');
    }
  }
};
</script>

<template>
  <p>{{ reversedMessage }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
};
</script>

<template>
  <p>{{ mesage }}</p> <!-- mesageが誤っている -->
</template>

<script>
export default {
  data() {
    return {
      message: 'Correct spelling'
    };
  }
};
</script>

<script>
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');
</script>

<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    setTimeout(() => {
      this.message = 'Loaded!';
    }, 1000);
  }
};
</script>

<template>
  <p>{{ propMessage }}</p>
</template>

<script>
export default {
  props: ['propMessage']
};
</script>