Alternative technique to using getCurrentInstance() in plugin composables?

[Rogue3799]

I'm building a component library plugin, and many of the more complex components share similar features. I intended to use the Composition API as a means of sharing the logic for these features.

Because of the limitations described below, I can include part of each feature by calling the use<FeatureName> composable function within setup(), but other aspects of features, particularly those which require access to DOM elements or template refs, must be included in other component Options through various means. Is anyone aware of a cleaner way of accomplishing this? I'm open to any ideas.

I am aware that this cannot be accessed inside the setup() method (or <script setup>). I'm also aware that getCurrentInstance(), which had been available in the past, is no longer available due to it being an internal API. Some have said that getCurrentInstance() is fine to use for the sake of developing plugins. According to the source code, getCurrentInstance() is

For getting a hold of the internal instance in setup() - useful for advanced plugins

My code is below.

// TextField.vue
import { defineComponent, computed } from 'vue';

import AtxFieldHelperText from '../field-helper-text/FieldHelperText.vue';
import AtxIcon from '../icon/Icon.vue';

import { formField, id, aria, fieldHelperText } from '../../composables';
const { useAria } = aria;
const { useFormField } = formField;
const { useFieldHelperText } = fieldHelperText;
const { useId } = id;

export default defineComponent({
  name: 'TextField',
  components: {
    AtxFieldHelperText,
    AtxIcon,
  },
  emits: [...formField.emits],
  props: {
    ...aria.props,
    ...formField.props,
    ...fieldHelperText.props,
    ...id.props,
  },
  setup(props, context) {
    // Component Identifier
    useId();

    // Form Field
    const { fieldValue, isFilled } = useFormField(props, context);

    // ARIA and Accessibility
    const { resolveAriaLabel } = useAria();
    const resolvedAriaLabel = computed(() => {
      return resolveAriaLabel(props.label);
    });

    // Helper Text
    const { resolvedFieldHelperText } = useFieldHelperText(props);

    return {
      isFilled,
      resolvedAriaLabel,
      fieldValue,
      resolvedFieldHelperText,
    };
  },
  methods: {
    // This method cannot be defined in `useFormField()`, because it requires access to template refs.
    onClickLabel: formField.methods.onClickLabel.bind(this)
  },
  mounted() {
    // The mounted hook cannot be defined in `useFormField()`, because it references `this` when assigning an `id` attribute to the root element.
    id.mounted.bind(this)()
  },
});

// composables/form-field.js
import { defineProps, defineEmits, onMounted, ref, computed, watch } from 'vue';

export const formField = {
    props: {
        label: {
            type: String,
            required: true
        },
        modelValue: {
            type: String,
        },
        placeholder: {
            type: String
        },
        disabled: {
            type: Boolean
        },
    },
    emits: [
        'update:modelValue',
        'input'
    ],
    useFormField(props, { emit }) {
        const fieldValue = ref('');
    
        const isFilled = computed(() => {
            return fieldValue.value.length > 0
        });

        watch(fieldValue, (newValue) => {
            emit('update:modelValue', newValue);
            emit('input', newValue);
        });
    
        return {
            fieldValue,
            isFilled
        };
    },
    methods: {
       // This method cannot be defined in `useFormField()`, because it requires access to template refs.
        onClickLabel($event) {
            $event.preventDefault();
            if (this.disabled) return;
            if (this.$refs.input) {
                this.$refs.input.focus();
            }
        }
    }
}