bodyContent not showing

It seems like the issue is with the conditional rendering of the bodyContent element. It is only being rendered if $data._slideIndex is equal to 0 and $store.state.device is equal to 'phone', or if $data._slideIndex is equal to the length of element.content.slides minus 1 and $store.state.device is equal to 'phone'.

One possible solution is to use a computed property to determine whether or not to render the bodyContent element. This computed property can check if $data._slideIndex is equal to 0 and $store.state.device is equal to 'phone', or if $data._slideIndex is equal to the length of element.content.slides minus 1 and $store.state.device is equal to 'phone', and return a boolean value accordingly.

Here's an example of how this can be implemented:

<template>
  <div>
    {{ $data._slideIndex }}
    <div ref="bodyContent" class="ins phone-ins" v-html="element.content.ins" v-if="shouldRenderBodyContent" />
  </div>
</template>

<script>
export default {
  computed: {
    shouldRenderBodyContent() {
      return (
        ($data._slideIndex === 0 && $store.state.device === 'phone') ||
        ($data._slideIndex === element.content.slides.length - 1 && $store.state.device === 'phone')
      );
    },
  },
};
</script>

In this example, we've created a computed property called shouldRenderBodyContent that checks if $data._slideIndex is equal to 0 and $store.state.device is equal to 'phone', or if $data._slideIndex is equal to the length of element.content.slides minus 1 and $store.state.device is equal to 'phone'. If either of these conditions is true, the computed property returns true, which causes the bodyContent element to be rendered.

By using a computed property, we can ensure that the bodyContent element is rendered whenever the conditions for rendering it are met, even if the component is not refreshed.