我正在尝试在Vue组件中添加分页代码，并且试图在已挂接的钩子中添加该代码以调用该函数，但是它不起作用。我想在组件完全加载后加载代码。此外，jQuery代码不会在Vue组件中加载。为此，我是否需要将代码更改为纯JavaScript。您可以指导我如何解决此问题吗？

// Create a root instance for each block

var vueElements = document.getElementsByClassname('search-bento-block');
var count = vueElements.length;

const store = new Vuex.Store({
  state: {
    query: drupalSettings.bento.query ? drupalSettings.bento.query : '',bentoComponents: []
  },mutations: {
    add (state,payload) {
      state.bentoComponents.push(payload)
    }
  },getters: {
    getcomponents: state => {
      return state.bentoComponents
    }
  }
})

// Loop through each block
for (var i = 0; i < count; i++) {
  Vue.component('results',{
    template: `
    <div v-if="results && results.length > 0">
    <div v-for="result in results">
      <div class="search-result-item">
        <div class="image-holder">
          <img src="https://images.unsplash.com/photo-1517836477839-7072aaa8b121?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80">
        </div>
        <div class="container-content">
          <a v-bind:href="result.url">
            <h3 v-html="result.title"></h3>
          </a>
          <p>Subjects: <span v-html="result.subjects"></span></p>
        </div>

      </div>
    </div>

    </div>

    <div v-else>
      <p>No results found.</p>
    </div>
    `,props: ['results'],})

   new Vue({
    el: vueElements[i],store,data: {
      message: 'Hello There!',results: [],total: 0,bentoSettings: [],},methods: {
      addComponentToStore: function (type) {
        this.$store.commit('add',type);
        console.log("test");
        console.log(this.results.length);

      }

    },mounted: function() {
      // console.log(this.$route.query.bentoq);
      const id = this.$el.id;
      this.bentoSettings = drupalSettings.pdb.configuration[id];

      var bentoConfig = drupalSettings.pdb.configuration[id].clients[this.bentoSettings.bento_type] ? drupalSettings.pdb.configuration[id].clients[this.bentoSettings.bento_type].settings : [];
      axios
        .get('/api/search/' + this.bentoSettings.bento_type,{
          params: {
            query: this.$store.state.query,plugin_id: this.bentoSettings.bento_type,bento_limit: this.bentoSettings.bento_limit,bento_config: bentoConfig,}
        })
        .then(response => {
          console.log(response);
          this.results = response.data.records;
          this.total = response.data.total;

          this.addComponentToStore({
            title: this.bentoSettings.example_field,count: this.total
          });
        })
        .catch(error => {
          console.log(error.response);
        })
    }
  });
}


// I'm trying to call following function in Vue component.


function baseThemePagination1() {
  //Pagination
  pageSize = 3;

  var pageCount = $('.line-content').length / pageSize;

  for (var i = 0; i < pageCount; i++) {

    $('#pagin').append('<li><a href=\'#\'>' + (i + 1) + '</a></li> ');
  }
  $('#pagin li').first().find('a').addClass('current')
  showPage = function(page) {
    $('.line-content').hide();
    $('.line-content').each(function(n) {
      if (n >= pageSize * (page - 1) && n < pageSize * page)
        $(this).show();

    });
  }

  showPage(1);

  $('#pagin li a').click(function() {
    $('#pagin li a').removeclass('current');
    $(this).addClass('current');
    showPage(parseInt($(this).text()))

  });
}