Override default vue-formulate snow.scss theme

Question

English is not my native language and I might not understand the vue-formulate documentation correctly but I'm trying to use vue-formulate module in a Nuxt.js project. I'm importing the default snow.scss file, then my global style:

css: [
'@/node_modules/@braid/vue-formulate/themes/snow/snow.scss',
'@/assets/css/style.scss',

],

Then I try to customize class globally:

Vue.use(VueFormulate, {
  classes: {
    element: 'custom-element',
  },
})

In my style.scss I have:

.custom-element input:focus {
  border: 1px solid $my-color;
}

I can see the custom class on the wrapper around the actual element but my style is override by .formulate-input[data-classification="text"] input:focus unless I add !important

So I wonder what I'm doing wrong here? Any help will really be appreciated! I don't want to create my own scss, the default one is a good starter where I just need to do some update and using !important doesn't seem to be a good practice.

Thanks in advance :)