What is wrong with the vue file?

Question

Vue.js

I made this code according to the video instructions. Moreover, it works for the blogger, but it gives me an error in the console:
[Vue warn]: Property or method "options" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declari...
found in
---> at resources\assets\js\component\rooms\add_rooms.vue
followed by a second error:
[Vue warn ]: Error in directive loading bind hook: "TypeError: Cannot set property 'static' of undefined"
found in
---> at resources\assets\js\component\rooms\add_rooms.vue
What could be the problem?

<template>
  <div class="row">
    <div class="col-md-12" v-loading="isLoading" :loading-options="{ options }">
      <h1>Добавить новую комнату</h1>
        <div class="form-group">
          <label for="name">Имя комнаты</label>
          <input type="text" name="name" class="form-control" v-model="room_name">
        </div>
        <div class="form-group">
          <input type="submit" @click="AddRoom()" name="submit" value="Add Room" class="btn btn-default">
        </div>
      </div>
    </div>
</template>
<script>
  import loading from 'vue-loading';
  export default{
    directives: { loading },
    data: function() {
      return {
        room_name:"",
        isLoading:false,
      }
    },
    methods:{
      AddRoom:function(){
        this.isLoading = true;
      }
    }
  }
</script>

Answer 1

:loading-options="{ options }"

What is options? You are told in plain text (learn English) that you do not have any options:
The second mistake (again, learn English, everything is said in plain text) - in the bind hook of the loading directive, you are trying to set a property of an object, but instead of an object you have undefined there. It is difficult to say something more specific, since you decided not to show the code of the directive.