vue3 如何分离组件的公共逻辑？

<template lang="pug">
.container vue3
</template>

<script setup>
import { provide } from "vue"

const props = defineProps({
    msg: {
        type: String,
        default: "",
        // required: true
    },
})

let data = $ref({
    a:1
})
provide("data", data)

const emit = defineEmits(["change"])

const demo = () => {
    console.log("demo")
}
defineExpose({
    demo,
})
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
}
</style>

以上是一个基本的vue组件，我不介意各种语法糖, 好用就用，所以我全用。

问题是:

我有几个逻辑完全一样的组件，但页面结构与样式不同，请问怎样提取逻辑代码？看网上的教程，一言难尽……大部分都是提取方法到js里再导入