siimee/src/components/card.vue

<template lang="pug">
.card.f-col.start.b-solid.rounded.bg-primary.mr-1
    header.t-right.dark.ph-1.pt-1
        h3 {{ card.name }}

    main.ph-1
        section
            img(alt="Vue logo" src="@/assets/logo.png").w-full

    footer.ph-1.b-1
        button(@click="state.count++").b-solid.rounded.p-0 {{ state.count }}
        button(@click="close").b-solid.rounded.p-0 close

</template>

<script setup>
import { defineProps, reactive, getCurrentInstance } from 'vue'

const instance = getCurrentInstance()

const props = defineProps({
    msg: String,
    card: Object
})

const state = reactive({
    count: 0,
    loaded: false,
    profile: null
})

const close = e => {
    instance.emit('remove', props.card)
}

</script>

<style lang="postcss">
@import '@/sss/theme.sss'

.card
    height: $ms-8
    width: $ms-7
</style>