javascript - reutilización de código para props, emits, useStore en Vue 3

Imagina que tengo una aplicación que tiene 10 componentes que son similares en algunos aspectos, pero contienen contenido diferente y algunas diferencias funcionales. Pero todos reciben las mismas 3 props como base (en otras palabras, pueden definir más, pero todos definen al menos tres props específicos). También todos tienen 1 emisión en común. Además, todos llaman a const store=useStore() y tienen la misma propiedad computada que obtiene un valor del store de Vuex.

¿Hay alguna manera de que pueda crear un componible u otra estrategia para permitir que estos componentes compongan o hereden estas líneas de código comunes que actualmente se repiten en el src.

Ejemplo :

//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>

Y otro ejemplo:

//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>

Observe cómo hay mucha repetición entre estos dos, pero hay diferencias clave.