refactor: refs #8304 improve required attribute handling in VnNotes using computed property

src/components/ui/VnNotes.vue

@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { ref, reactive, useAttrs } from 'vue';
+import { ref, reactive, useAttrs, computed } from 'vue';
 import { onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
@@ -20,6 +20,10 @@ const emit = defineEmits(['onFetch']);
 
 const $attrs = useAttrs();
 
+const isRequired = computed(() => {
+    return Object.keys($attrs).includes('required')
+});
+
 const $props = defineProps({
     url: { type: String, default: null },
     saveUrl: {type: String, default: null},
@@ -134,7 +138,7 @@ function fetchData([ data ]) {
                     v-model="newNote.observationTypeFk"
                     option-label="description"
                     style="flex: 0.15"
-                    :required="$attrs.required"
+                    :required="isRequired"
                     @keyup.enter.stop="insert"
                 />
                 <VnInput
@@ -145,7 +149,7 @@ function fetchData([ data ]) {
                     size="lg"
                     autogrow
                     @keyup.enter.stop="handleClick"
-                    :required="$attrs.required"
+                    :required="isRequired"
                     clearable
                 >
                     <template #append>