simple vue3 options and composition component

hello-world-options.vue

const App2 = {
    data() {
      return {
        message: "Hello from App 2!",
      };
    },
    methods: {
        modifyMessage() {
            return "Modified Message"
        },
    },
    template: `
      <div>
        <style> p { color:blue; }</style>
        <p>{{ message }}</p>
        <p class="btn huge btn-link">{{ modifyMessage() }}</p>
     </div>
    `,
  };
  
  export default App2;

hello-world-sfc.vue

<template>
  <div class="app1">
    Application Gist {{message}}
  </div>
</template>
<script setup >  
  import { ref } from 'vue'
  const message = ref("from SFC")
</script>
<style scoped>
@import 'https://eformz.in/app/static/extra/temp/packed.css';
.app1 { background-color: red;}
</style>

remote-component.vue

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

<script>
export default {
  name: 'RemoteComponent',
  data() {
    return {
      greeting: 'Hello',
      message: 'This component was loaded remotely!'
    };
  }
};
</script>