How to import individual shapes in vue3 ?

[geminigeek]

hi,

i am trying to use konva , in astro with vue, i do not want to bind it to the whole vue app , can anyone help me how to use it in just one component ?
i want to use it like this

related to this #144 (comment)

<script setup>
import { ref } from "vue"
import { VCircle, VLayer, VStage } from "vue-konva"
const configKonva = ref({
  width: 200,
  height: 200,
})
const stage = ref()
const layer = ref()
const circle = ref()
const configCircle = ref({
  x: 100,
  y: 100,
  radius: 70,
  fill: "red",
  stroke: "black",
  strokeWidth: 4,
})
</script>
<template>
  <v-stage ref="stage" :config="configKonva">
    <v-layer ref="layer">
      <v-circle ref="circle" :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</template>