Is overriding a global Vue component safe?

[admin]

Let's say there is a global component

BIcon.vue

available everywhere.<br>
And another component, but regular not global, called

BIconFake.vue

.

We can override

BIcon.vue

by

BIconFake.vue

like that:

<template>
  <div>
   <b-icon icon="plus"><!-- <- Here is it BIconFake component! -->
  </div>
</template>

<script>
import BIcon from '~/components/BIconFake'

export default {
  components: {
    BIcon // <- BIconFake component inside!
  }
}
</script>

By this way, Vue.js will display

BIconFake

component instead of regular

BIcon

component.<br>
I tried to pass props, events or attributes and it works like expected.<br>
Vue.js is awesome... and big. Really, I don't know everything about it, and I don't want to see side effects or unexpected behavior when doing this override.

<strong>So, I want to know if it's safe to do that? Does it make a mess in Vue.js instance? What about memory?</strong>

we can override component with pure vue.js. Also, I made this example for Buefy, but we can do that with any UI frameworks like Quasar, Vuetify...

<strong>Thinking globaly, Is it good to override components of UI frameworks? What about security, scalability and maintenability?</strong>

In fact, I searched a way to build a plugins or addons system to my Nuxt.js app, like wordpress plugins.<br>
Is it a good architecture to start building my app by overriding vue component? Is there another way to build app addons for vue, by using npm or webpack?