.red {
  padding: 1rem;
  border: 3px solid red
}

.orange {
  padding: 1rem;
  border: 3px solid orange
}

.green {
  padding: 1rem;
  border: 3px solid green
}

.blue {
  padding: 1rem;
  border: 3px solid blue
}

const { createApp, ref } = Vue;

const app = createApp({
  setup() {
    const data = ref({
      name: 'Ray',
      url: 'https://israynotarray.com/'
    });
    
    return {
      data,
    }
  }
});

app.component('my-component-1', {
  template: `
    <div class="orange">
      <p>我的名字是：{{ data.name }}</p>
      <p>我的部落格網址是：{{ data.url }}</p>
    </div>
   `,
  props: ['data'],
  setup({ data }) {
    const text = ref('Components - 1.');
    
    return {
      data,
    }
  }
})

app.mount('#app');