TypeError on Template ref with ComponentPublicInstance

[caxerx]

I have a template ref with type Ref<ComponentPublicInstance | null> for accessing $refs. It works fine on runtime. However, I get TypeError on building the app:

src/core/views/TopBar/TagBar.vue:17:27 - error TS2551: Property 'refs' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'. Did you mean '$refs'?

17   () => scrollbar.value?.$refs?.wrap as HTMLDivElement | undefined
                             ~~~~

  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:437:5
    437     $refs: Data;
            ~~~~~
    '$refs' is declared here.

Found 1 error.

Here is my original code in <script setup>

import { computed, ref } from "vue";
import type { Ref, ComputedRef, ComponentPublicInstance } from "vue";

const scrollbar: Ref<ComponentPublicInstance | null> = ref(null);
const scrollWrapper: ComputedRef<HTMLDivElement | undefined> = computed(
  () => scrollbar.value?.$refs?.wrap as HTMLDivElement | undefined
);

const handleWheel = (e: WheelEvent) => {
  const eventDelta = e.deltaY;
  if (scrollWrapper?.value?.scrollLeft != null) {
    scrollWrapper.value.scrollLeft =
      scrollWrapper.value.scrollLeft + eventDelta / 4;
  }
};

[caxerx]

Seems I had misuse the ComponentPublicInstance type. Use DefineComponent instead of ComponentPublicInstance will work.