How to use a component for different paths with loading different data for that component?

Question

Vue.js

I have a component.

<template>
      <HotTable :settings="hotSettings" ></HotTable>
</template>

<script>
import HotTable from "@handsontable/vue";
import Handsontable from "handsontable";

export default {
  data() {
    return {
        hotSettings: {
          data: 
          [
            ["", "Ford", "Volvo", "Toyota", "Honda"],
            ["2016", "10", 11, 12, 13],
            ["2017", 20, 11, 14, 13],
            ["2018", 30, 15, 12, 13]
          ],
          rowHeaders: true,
          colHeaders: true
        }
    };
  },
  components: {
    HotTable
  }
};
</script>

This component is displayed in three different paths: /path/path1, /path/path2, /path/path3.
How can I make it so that when following these paths, this component is displayed on each page, but the data for it (the data field) is different?