Привязки классов Vue.js, вставка пустого пространства между классами css

Я использую привязку v-bind:class к компоненту с целью включения и выключения класса css в зависимости от достоверности boolean в моем компоненте Vue.js.

Когда я в своем шаблоне объявляю:

<aside v-bind:class="{'--opened':sidebarVisible}" class="sidebar" id="sidebar">

Часть сценария моего component:

<script>
import { EventBus } from "@/event-bus.ts";
    export default {
        data(){
            return {
                sidebarVisible:false
            }                
        }    
        //Cut for breavity            
};      

</script>

Я ожидаю, что Vue.js изменит класс на class="sidebar--opened", но вместо этого я получаю class="sidebar --opened" (с пустым пространством между боковой панелью и --opened). Как я могу обойти это поведение?