Vue Array shuffling 2 time(in ssr and browser)

I want to shuffle an array and pass it to the component.
It’s working when going direct to the page with nuxt-link.

<template>
  <div>
  
    <CardsMetalCard :myCategory="myCategory" :catMetal="catMetal" />
  </div>
</template>
computed: {
...mapGetters("design", {
  designCategory: ["category"],
}),

myCategory() {
  var result = this.designCategory.find((i) => i.url === this.category);
  this.catMetal = result.metal;
  var newRelatedArray = this.designCategory.filter(
    (i) =>
      i.metal === result.metal 
  );
  // Shuffle is method to sort array and I console.log(array) before return in shuffle
  return this.shuffle(newRelatedArray);
},

},

Everything works fine in nuxt-link. But when I refresh the page. Array gets shuffled 2 times. 1 in SSR and the other in the browser.
So my component loads data from SSR shuffle and then the component renders again with browser shuffle. In this scenario, the Final component has a mismatched value from different objects.