Why is there no active component instance in Vue 2.7?

[BeHo86]

Hi all,
I'm implementing components using Composition API in a project running on Vue 2.7. Till now, only the Options API has been used and there have been no issues so far, but we decided to use Composition API on a bunch of new features as a first step towards a possible migration to Vue3. Anyway, in no single component (no matter where in the application) I was able to use any (!) lifecycle hook from inside <script setup> (or setup(), doesn't matter either). In the console, I get
[Vue warn]: <name_of_hook> is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup().
Same picture when I try to use v-bind() inside <style>:
[Vue warn]: useCssVars is called without current active component instance.

I have searched the web without success - the issue dosn't have to do with wrong imports as indicated here, I'm getting all my stuff from 'vue'. I've also posted my problem at Stackoverflow, but without success. Can you give me any hint why I'm getting this error? I'm absolutely calling the lifecycle hooks from inside setup() (or <script setup>, respectively).

[liulinboyi]

Can you provide a minimum reproduction such as a playground or git repository?

[BeHo86]

I fear that's not really possible - the setup is quite deeply nested into / connected to the laravel backend, so it would hardly be possible without excessive work (and it would possibly require me to post code that must not be published). Here is, however, the code of the component in question:

<template>
    <div>
        <button class="font-semibold p-4 rounded cButton" :style="optionalStyles" :class="optionalClasses">
            <div class="bIcon" v-html="buttonIcon"></div>
            <div>Button</div>
        </button>
    </div>
</template>

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

const props = defineProps(['bgcolor', 'color', 'icon'])
const optionalStyles = reactive({});
const optionalClasses = reactive({});
const svgs = import.meta.glob('../../zzzz.icons/svg/*.svg', { as: 'raw', eager: true });

optionalStyles['color'] = props.color;
optionalClasses[props.bgcolor] = props.bgcolor !== undefined;

const buttonIcon = computed(() => {
    return svgs['../../zzzz.icons/svg/' + props.icon + '.svg']
})

</script>

<style scoped>
.cButton {
    width: fit-content;
    display: flex;
}

.bIcon {
    margin-right: 0.5rem;
}
.bIcon >>> path {
    fill: v-bind('props.color');
}

.bIcon >>> svg {
    width: 1.5rem;
}
</style>

[BeHo86]

OK, I got at least the lifecycle hooks to work by importing them not from 'vue' but from 'vue/dist/vue.esm' - which is strange in my opinion because generally, all of Vue's imports should be taken from 'vue', and it works this way for all the other Composition API stuff very well...

However, useCssVars / SFC CSS binding is still not working. The same error apparently existed in Vue3 as well and got fixed just recently:
#7759 and #7760
The fix was applied just to version 3, but not to Vue2 as far as I can see. So, could this be the reason for the failing css binding? And if so, are there chances that the fix mentioned above will be made available for Vue 2.7 as well?