как я могу отключить функцию на созданном событии

Question

** Я хочу отключить функцию от метода к созданному событию, я попробовал это, но не работает ** https://gist.github.com/glg123/d0143b24af9c2b39a50a18d525cf6775

Я пытался добавить шаблон в блейде php, но не работает

, когда я выбираю шаблон, пользователь напрямую не работает, но когда я добавляю его в тег ссылки роутера и нажимаю на него, шаблон получает данные

    <template>
  <div class="users">
    <div v-if="error" class="error">
      <p>{{ error }}</p>
    </div>

    <ul v-if="users">
      <li v-for="{ id, name, email } in users">
        <strong>Name:</strong> {{ name }},
        <strong>Email:</strong> {{ email }}
      </li>
    </ul>

    <div class="pagination">
      <button :disabled="! prevPage" @click.prevent="goToPrev">Previous</button>
      {{ paginatonCount }}
      <button :disabled="! nextPage" @click.prevent="goToNext">Next</button>
    </div>
  </div>
</template>

<script>

  import axios from 'axios';

  const getUsers = (page, callback) => {
    const params = {page};
    axios
      .get('/api/users', {params})
      .then(response => {
        callback(null, response.data);
      }).catch(error => {
      callback(error, error.response.data);
    });
  };
  export default {
    data() {
      return {
        users: null,
        meta: null,
        links: {
          first: null,
          last: null,
          next: null,
          prev: null,
        },
        error: null,
      };
    },
    computed: {
      nextPage() {
        if (!this.meta || this.meta.current_page === this.meta.last_page) {
          return;
        }
        return this.meta.current_page + 1;
      },
      prevPage() {
        if (!this.meta || this.meta.current_page === 1) {
          return;
        }
        return this.meta.current_page - 1;
      },
      paginatonCount() {
        if (!this.meta) {
          return;
        }
        const {current_page, last_page} = this.meta;
        return `${current_page} of ${last_page}`;
      },
    },
    beforeRouteEnter(to, from, next) {

      getUsers(to.query.page, (err, data) => {
        next(vm => vm.setData(err, data));
      });
    },
    // when route changes and this component is already rendered,
    // the logic will be slightly different.
      beforeRouteUpdate (to, from, next) {
         this.users = this.links = this.meta = null
         getUsers(to.query.page, (err, data) => {
           this.setData(err, data);
           next();
         });
       },
    created() {


     /*    axios
           .get('/api/users')
           .then(response => {
             this.users = response.data.data;
             this.links = response.data.links;
             this.meta = response.data.meta;

             this.beforeRouteUpdate(1, (err, data) => {
               next(vm => vm.setData(err, data));
             });
            // this.setData(response,{data: this.users, links:this.links, meta:this.meta});
            // this.goToNext();
             //this.goToPrev();
            /* const path = `users`
             if (this.$route.path !== path) this.$router.push(path)*/

          // });
    },
    methods: {
      goToNext() {

        this.$router.push({
           name: 'users.index',
          query: {
            page: this.nextPage,
          },
        });
      },
      goToPrev() {
        this.$router.push({
          name: 'users.index',
          query: {
            page: this.prevPage,
          },
        });
      },
      setData(err, {data: users, links, meta}) {
        if (err) {
          this.error = err.toString();
        } else {
          this.users = users;
          this.links = links;
          this.meta = meta;
        }
      },
    },
  };
</script><template>
  <div class="users">
    <div v-if="error" class="error">
      <p>{{ error }}</p>
    </div>

    <ul v-if="users">
      <li v-for="{ id, name, email } in users">
        <strong>Name:</strong> {{ name }},
        <strong>Email:</strong> {{ email }}
      </li>
    </ul>

    <div class="pagination">
      <button :disabled="! prevPage" @click.prevent="goToPrev">Previous</button>
      {{ paginatonCount }}
      <button :disabled="! nextPage" @click.prevent="goToNext">Next</button>
    </div>
  </div>
</template>
<script>

  import axios from 'axios';

  const getUsers = (page, callback) => {
    const params = {page};
    axios
      .get('/api/users', {params})
      .then(response => {
        callback(null, response.data);
      }).catch(error => {
      callback(error, error.response.data);
    });
  };
  export default {
    data() {
      return {
        users: null,
        meta: null,
        links: {
          first: null,
          last: null,
          next: null,
          prev: null,
        },
        error: null,
      };
    },
    computed: {
      nextPage() {
        if (!this.meta || this.meta.current_page === this.meta.last_page) {
          return;
        }
        return this.meta.current_page + 1;
      },
      prevPage() {
        if (!this.meta || this.meta.current_page === 1) {
          return;
        }
        return this.meta.current_page - 1;
      },
      paginatonCount() {
        if (!this.meta) {
          return;
        }
        const {current_page, last_page} = this.meta;
        return `${current_page} of ${last_page}`;
      },
    },
    beforeRouteEnter(to, from, next) {

      getUsers(to.query.page, (err, data) => {
        next(vm => vm.setData(err, data));
      });
    },
    // when route changes and this component is already rendered,
    // the logic will be slightly different.
      beforeRouteUpdate (to, from, next) {
         this.users = this.links = this.meta = null
         getUsers(to.query.page, (err, data) => {
           this.setData(err, data);
           next();
         });
       },
    created() {


     /*    axios
           .get('/api/users')
           .then(response => {
             this.users = response.data.data;
             this.links = response.data.links;
             this.meta = response.data.meta;

             this.beforeRouteUpdate(1, (err, data) => {
               next(vm => vm.setData(err, data));
             });
            // this.setData(response,{data: this.users, links:this.links, meta:this.meta});
            // this.goToNext();
             //this.goToPrev();
            /* const path = `users`
             if (this.$route.path !== path) this.$router.push(path)*/

          // });
    },
    methods: {
      goToNext() {

        this.$router.push({
           name: 'users.index',
          query: {
            page: this.nextPage,
          },
        });
      },
      goToPrev() {
        this.$router.push({
          name: 'users.index',
          query: {
            page: this.prevPage,
          },
        });
      },
      setData(err, {data: users, links, meta}) {
        if (err) {
          this.error = err.toString();
        } else {
          this.users = users;
          this.links = links;
          this.meta = meta;
        }
      },
    },
  };
</script>