use templateRef

Author: dwightjack

src/components/TheCycleEdit.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, ref, useTemplateRef, watch } from 'vue';
 import IntervalEditBox from '@/components/IntervalEditBox.vue';
 import BaseButton from '@/components/BaseButton.vue';
 import BaseIcon from '@/components/BaseIcon.vue';
@@ -41,7 +41,7 @@ function submit() {
   close();
 }
 
-const dialog = ref<HTMLDialogElement>();
+const dialog = useTemplateRef('dialog');
 watch(
   () => open,
   (open: boolean) => {

src/components/TheGraphicTimer.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { watch, ref, onMounted, onUnmounted, computed } from 'vue';
+import {
+  watch,
+  ref,
+  onMounted,
+  onUnmounted,
+  computed,
+  useTemplateRef,
+} from 'vue';
 import { number } from 'vue-types';
 import { getIntervalTypeColor } from '@/utils';
 import { useCycle } from '@/stores/cycle';
@@ -27,7 +34,7 @@ const { size } = defineProps({
   size: number().def(50),
 });
 
-const canvasRef = ref<HTMLCanvasElement>();
+const canvasRef = useTemplateRef('canvasRef');
 const remaining = computed(
   () => cycle.currentCountdown ?? cycle.currentInterval.duration,
 );