Как использовать компонент для разных путей с загрузкой различных данных для этого компонента?

Question

[Дмитрий Быстров]

У меня есть компонент.

<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>

Этот компонент отображается по трём разным путям: /path/path1, /path/path2, /path/path3.
Как можно сделать так, чтобы, переходя по этим путям, на каждой странице отображался этот компонент, но данные для него (поле data) были разными?

Comments

[Koteezy]

Props?