Vue InstantSearch - How do I prevent infinite loops?

Our widgets accept arrays and objects as props. When you inline these directly in the template, it causes the widget to register again on every re-render, and, in some cases, can cause infinite loops. Instead, we recommend you keep track of those variables in data.

So, instead of this:

Vue

<template>
  <ais-hierarchical-menu :attributes="['lvl0', 'lvl1']" />
</template>

Write this:

Vue

<template>
  <ais-hierarchical-menu :attributes="attributes" />
</template>

<script>
export default {
  data() {
    return {
      attributes: ['lvl0', 'lvl1']
    }
  }
}
</script>

This is valid for all values which aren’t referentially equal: arrays, objects and functions.