JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
  <div class="note">
    <h3 class="title">
      {{notes[0].title}}
    </h3>
    <p class="content">
      {{notes[0].content}}
    </p>
  </div>
  <div class="note">
    <h3 class="title">
      {{notes[1].title}}
    </h3>
    <p class="content">
      {{notes[1].content}}
    </p>
  </div>
  <div class="note">
    <h3 class="title">
      {{notes[2].title}}
    </h3>
    <p class="content">
      {{notes[2].content}}
    </p>
  </div>
</div>

CSS

#app{
  display: flex;
  .note{
    margin: 1rem;
    text-align: center;
    border: #ccc 1px solid;
    padding: 0 1rem;
    border-radius: .5rem;
    box-shadow: 1px 1px 5px 1px;
  }
}

JavaScript

const { createApp }=Vue
createApp({
  data() {
    return {
      notes: [
        {
          title: "春節行程安排",
          content: "吃飽睡，睡飽吃",
          color: "red",
        },
        {
          title: "工作待辦事項",
          content: "詢問各家廠商報價",
          color: "green",
        },
        {
          title: "運動健身計畫",
          content: "每天早上六點去健身",
          color: "blue",
        },
      ]
    }
  },
  mounted(){
    this.notes[0].content= "多出門、到處走走、也要多運動";
  }
}).mount("#app");