Scoped CSS attributes generation is different for Vue2 vs Vue3

[af4oz]

Below are links for same app:
Vue 2.5 version(with bootstrap-vue): https://653dgx.csb.app/
Vue 3 version(with bootstrap-vue-next): https://g97ddl.csb.app/

You can inspect html and note that scoped CSS data-v-xx attributes(data-v-<short_random_string> is used to apply styles internally by vue) generation is different(not talking about <short_random_string> but it's position on html elements).
Example(check <HelloWorld/>):

// Vue 3 version
<div class="hello hello-world" data-v-7ba5bd90>
  <div class="hello-1">
    <span class="hello-2">This is General vue3.2 component(<HelloWorld />)</span>
  </div>
</div>

// Vue 2.5 version
<div data-v-763db97b data-v-7ba5bd90 class="hello hello-world">
  <div data-v-763db97b class="hello-1">
    <span data-v-763db97b class="hello-2">This is General vue2.5 component(<HelloWorld />)</span>
  </div>
</div>

It will break existing custom styles(using Vue scoped styles feature) that are added based on bootstrap-vue's internal classes during migration. Why and is there anyway to mitigate that issue?

[VividLemon]

I don't understand the question

[af4oz]

Updated! Can you please check and let me know if need more info.