[Vuejs]-Vue js dynamic class add

Bootstrap and other libraries like jQuery aren’t completely compatible with Vue because they have different architectures.

Bootstrap manipulates DOM directly, while Vue renders DOM based on virtual DOM changes thus overwriting any Bootstrap’s DOM changes.

Unfortunately Vue doesn’t care about safe handling of existing DOM, it just overwrites it.

So you should toggle your class also with pure DOM directly (not with :class which overwrites any direct DOM changes).

So in short you shouldn’t mix DOM manipulations with Vue dynamic features.

You could use watchEffect:

onMounted(() => {
  watchEffect(() => button.value.classList.toggle('btn-primary', !allType.value));
});

...
<button ref="button" ...