Issues with BTooltip on Vue3 + @vue/compat

[fifzteen]

Describe the bug

Reproduction here:
https://stackblitz.com/edit/vitejs-vite-p8sht6

1. Reactivity in default slot doesn't work

in App.vue, value is ref object v-model binded to b-form-input in tooltip (A) and out of tooltip (B).

• When inputs on (A), the value applies also on (B).

• When inputs on (B), (A) has no changes.

2. Styles defined on custom-class are not applied

<template>
  <b-tooltip custom-class="custom-tip">...</b-tooltip>
</template>

<style scoped>
.custom-tip :deep(.tooltip-inner) {
  background-color: #ffffff;
  border: 1px solid #aaaaaa;
}
.custom-tip :deep(.arrow)::before {
  border-top-color: #aaaaaa;
}
</style>

expected	works now

Probably, It's because data attribute of scopeId isn't correctly on wrapper div.

// OK
<div data-v-{hash:8}></div>
// NG (now)
<div data-v-app></div>

3. Wrapper div elements still exists even if tooltip hidden

Increases div everytime tooltip shown

Steps to reproduce the bug

https://stackblitz.com/edit/vitejs-vite-p8sht6

Versions

Libraries:

• BootstrapVue: 2.23.1
• Bootstrap: 4.#.#
• Vue: 3.3.4
• @vue/compat: 3.3.4

Environment:

• Device: Mac
• OS: macOS Monterey
• Browser: Chrome
• Version: 113.0.5672.92