App.vue

<template>
    <div id="app" class="App">
        <p class="my-component">
            Je suis mon premier composant
        </p>
        <ul>
            <li v-for="todo in todos" :key="todo.id">
                {{ todo.name }} - {{ todo.dueDate.toLocaleString() }}
            </li>
        </ul>
    </div>
</template>

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}
</style>

<script>
export default {
  name: "app",
  data() {
    return {
      todos: [
        {
          id: 1,
          name: "Todo 1",
          dueDate: new Date()
        },
        {
          id: 2,
          name: "Todo 2",
          dueDate: new Date()
        },
        {
          id: 3,
          name: "Todo 3",
          dueDate: new Date()
        },
        {
          id: 4,
          name: "Todo 4",
          dueDate: new Date()
        }
      ]
    };
  }
};
</script>