Imagine I have an application that has 10 components that are similar in some ways, but contain different content and some functional differences. But they all receive the same 3 props as a base (in other words they may define more but all define at least three specific props) they also all have 1 emit in common. They also also call const store = useStore() and have the same computed property that pulls a value from vuex store.

Is there a way I can create a composable or other strategy to let these components compose or inherit these common lines of code that are currently repeated in the src.

Example:

//component 1
<script lang="ts" setup>

import { useStore } from 'vuex';

const store = useStore();

const props = defineProps<{
  a: number;
  b: string;
  c: boolean;
  uniqueToComp1: string;
}>();

const foo = computed(() => store.state.bar[props.a]);
const uniqueConstForComp1 = computed(() => props.a + Math.random());

const emit = defineEmits<{
  (e: 'exit'): void;
}>();

</script>

And another example:

//component 2
<script lang="ts" setup>

import { useStore } from 'vuex';

const store = useStore();

const props = defineProps<{
  a: number;
  b: string;
  c: boolean;
  uniqueToComp2: Function;
}>();

const foo = computed(() => store.state.bar[props.a]);
const uniqueConstForComp2 = computed(() => props.a - 8);

const emit = defineEmits<{
  (e: 'exit'): void;
}>();

</script>

Notice how there is a lot of repetition between these two, but there are key differences.