migrate to composition api

src/components/TimeWindows.vue

@@ -5,74 +5,79 @@
         v-for="window in windows"
         :key="window.label"
         @click="$emit('set-window', window)"
-        :class="{'is-active': window.label === activeWindow.label}"
+        :class="{ 'is-active': window.label === activeWindow.label }"
       >
-        <a>{{window.label}}</a>
+        <a>{{ window.label }}</a>
       </li>
     </ul>
   </div>
 </template>
 <script>
+import { ref, onMounted } from 'vue'
 import dayjs from 'dayjs'
 export default {
   props: {
     activeWindow: {
-      type: [Object, String]
+      type: Object
     }
   },
-  data() {
-    return {
-      windows: [{
+  setup(props, { emit }) {
+    const windows = ref([
+      {
         label: 'afgelopen uur',
         getStart: () => dayjs().subtract(1, 'hour').unix(),
         getEnd: () => dayjs().unix(),
         format: 'HH:mm',
         interval: 4
-      }, {
+      },
+      {
         label: '24 uur',
         getStart: () => dayjs().subtract(1, 'days').unix(),
         getEnd: () => dayjs().unix(),
         format: 'HH:mm',
         interval: 4
-      }, {
+      },
+      {
         label: 'vandaag',
         getStart: () => dayjs().startOf('day').add(1, 'day').subtract(24, 'hours').unix(),
         getEnd: () => dayjs().unix(),
         format: 'HH:mm',
         interval: 4
-      }, {
+      },
+      {
         label: '3 dagen',
         getStart: () => dayjs().startOf('day').add(1, 'day').subtract(3, 'days').unix(),
         getEnd: () => dayjs().unix(),
         format: 'ddd D/M',
         interval: 24
-      }, {
+      },
+      {
         label: 'week',
         getStart: () => dayjs().startOf('day').add(1, 'day').subtract(7, 'days').unix(),
         getEnd: () => dayjs().unix(),
         format: 'ddd D/M',
         interval: 24
-      }, {
+      },
+      {
         label: 'maand',
         getStart: () => dayjs().startOf('day').add(1, 'day').subtract(1, 'months').unix(),
         getEnd: () => dayjs().unix(),
         format: 'ddd D/M',
         interval: 24
-      }, {
+      },
+      {
         label: 'jaar',
         getStart: () => dayjs().startOf('day').add(1, 'day').subtract(1, 'year').unix(),
         getEnd: () => dayjs().unix(),
         format: 'ddd D/M',
         interval: 24 * 7
-      }]
-    }
-  },
-  mounted() {
-    if (typeof this.activeWindow === 'string') {
-      const window = this.windows.find(w => w.label === this.activeWindow.replace('-', ' '))
-      this.$emit('set-window', window)
-    } else if (!this.activeWindow.label) {
-      this.$emit('set-window', this.windows[1])
+      }
+    ])
+    onMounted(() => {
+      if (!props.activeWindow.label) emit('set-window', windows.value[1])
+    })
+    return {
+      windows
     }
   }
 }