How to change the content of a dynamic component in Vue JS?

Question

Vue.js

There is a component that I use on different pages
. In this component, all data is taken from an array. For example, the paths for images are from one array, and the block names are from another array.
I would like to use the same component on another page, but other images and block names (titles) will be used there. Images and titles will also be taken from arrays, but they can be larger or smaller in size

. How can this be done?

The component I want to use:

<div class="features container">
      <div
        class="features-item"
        v-for="(image, imageIndex) in images"
        :key="imageIndex"
      >
        <div class="feature__img">
          <img :src="image" alt="" />
        </div>
        <div class="feature__text">
          <h2>{{ featureHeaders[imageIndex] }}</h2>
          <p>{{ featureText[imageIndex] }}</p>
        </div>
      </div>
    </div>

export default {
data() {
    return {
featureHeaders: [
        "Trail Difficulty (1 out of 5)",
        "GPS Coordinates & Elevation",
        "Google Maps Birds-Eye-View",
        "Directions"              
      ],
featureText: [
"Text for first image",
"Text for second image",
"Text for third image",
"Text for fourth image",
],
images: [
        require("../assets/images/primary_features/trail.png"),
        require("../assets/images/primary_features/gps.png"),
        require("../assets/images/primary_features/earth.png"),        
        require("../assets/images/primary_features/time.png"),
]
     }
   }
}

The page on which I use the component:

<Primary_Features />

import Primary_Features from "../components/Primary_Features";

export default {
  name: "Pricing",
  components: {    
    Primary_Features
  }