vue2 to vue3 migration

src/components/DropdownSectionGrid.vue

@@ -1,44 +1,48 @@
 <template>
-    <div class="row p-2">
-        <div v-for="(item, index) in items" :key="index" class="col-md-3">
-
-            <div class="my-check v2">
-
-                <input class="form-control" :id="item.name" @input="event => { $emit('input', event.target.value) }"
-                    type="radio" v-model="value" :value="item.name">
-
-                <label :for="item.name"><img style="width:100%"
-                        :src="'https://cdn.magico.pl/pagebuilder/images/' + item.name + '.jpg'"
-                        :alt="item.label" /></label>
-            </div>
-
-        </div>
-
+  <div class="row p-2">
+    <div
+      v-for="(item, index) in items"
+      :key="index"
+      class="col-md-3"
+    >
+      <div class="my-check v2">
+        <label
+          @click="emitEvent(item)"
+          :for="item.name"
+          ><img
+            style="width: 100%"
+            :src="'https://cdn.magico.pl/pagebuilder/images/' + item.name + '.jpg'"
+            :alt="item.label"
+        /></label>
+      </div>
     </div>
+  </div>
 </template>
 <script>
-import grid from './grid.js'
+import { ref } from "vue";
+import grid from "./grid.js";
 
 export default {
+  emits: ["choose"],
+  setup(props, { emit }) {
+    const items = ref(grid);
 
-    methods: {},
-    data: function () {
-        return {
-            items: grid,
-            value: '',
-        }
-    },
-}
+    function emitEvent(item) {
+      emit("choose", item);
+    }
+    return { items, emitEvent };
+  },
+};
 </script>
 <style>
 .my-check input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
 }
 
 .my-check label {
-    cursor: pointer;
+  cursor: pointer;
 }
-</style>
+</style>