jsGrid not displaying in a Vue-cli scaffolded app

Question

I am trying to display jsGrid in a Vue-cli scaffolded app. The mounted function does not seem to fire. I am trying to execute a JavaScript function through VueJs. I have done < npm install jquery --save > in the app's root folder.

The code works fine with VueJS in a single page HTML file.

<template>
  <div>
    <br>
    <div class=" from-yellow-700 bg-gradient-to-br" id="jsGrid"><i class="fas fa-arrow-down"></i> {{ message }} <i class="fas fa-arrow-down"></i></div>
  </div>
</template>

<script>
import jQuery from "jquery";

export default {
  // name: "oneview",
  mounted:function(){
    jQuery("#jsGrid").jsGrid({
      width: "100%",
      height: "400px",
      inserting: true,
      editing: true,
      sorting: true,
      paging: true,
      data: this.clients,
      fields: [
          { name: "Name", type: "text", width: 150, validate: "required" },
          { name: "Age", type: "number", width: 50 },
          { name: "Address", type: "text", width: 200 },
          { name: "Country", type: "select", items: this.countries, valueField: "Id", textField: "Name" },
          { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
          { type: "control" }
      ]
    });
  },

  data: function() {
    return {
      message: 'jsGrid says Hello Vue App!',
      clients: [
          { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
          { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
      ],
      countries: [
          { Name: "", Id: 0 },
          { Name: "United States", Id: 1 },
          { Name: "Canada", Id: 2 },
          { Name: "United Kingdom", Id: 3 }
      ],
    }
  },

  methods: {
  },
}
</script>

<style scoped></style>