I'm from Ruby language so sorry for noob question. I would like to have asynchronous fetching of data to a table that comes from endpoint from my Rails backend application. I would like the data to be fetched live i.e. if a new record is created the result should be displayed in the table. To achieve that probably I need to send a GET request e.g. every 15 seconds and when the data is downloaded I would like to let you know that the app is doing it (add some sort of spinning wheel?).

What I have:

imports.js

const fetchSyncedProductsResultRequest = (token) => {
  return axios
    .get(`/api/v1/imports/products/sync_result`, {
      headers: {
        Authorization: `Bearer ${token}`,
      }
    })
    .then(response => {
      return response.data['products']
    })
};

sync_products.vue

<script>

import {
  fetchSyncedProductsResultRequest,
} from '../../api/imports'

export default {
  name: 'BackboneSyncProducts',
  data() {
  async mounted() {
    await fetchSyncedProductsResultRequest(this)
    this.syncedProductsFetched = true
    this.pageChanged(this.currentPage)
  },
  async mounted() {
    const jwtToken = this.$store.state.idToken;
    fetchSyncedProductsResultRequest(jwtToken).then(data => {
      this.fetchedProductSyncStatus = data
    })
  },

</script>

How to send this request every 15 seconds only when the user is on a page with sync_products.vue content and when the fetching is in progres display some spinning wheel?