我正在使用graphql和apollo用动态数据填充vue-slick-carousel。
这是使用i18 n的graphql查询

import gql from "graphql-tag";

export const GetSlider = gql`
  query GetSlider($locale: I18NLocaleCode) {
    sliderConfigs(locale: $locale) {
      data {
        id
      }
      data {
        attributes {
          title
          subTitle
          sliderImage {
            data {
              attributes {
                url
                name
              }
            }
          }
        }
      }
    }
  }
`;

所述滑块组件

<script>
import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";
import { GetSlider } from "../graphql/GetSlider";
import ContactBtn from "./ContactBtn";

export default {
  name: "Slider",
  components: { VueSlickCarousel, ContactBtn },
  data() {
    return {
      sliderConfigs: [],
      settings: {
        arrows: false,
        autoplay: true,
      },
    };
  },
  apollo: {
    sliderConfigs: {
      prefetch: true,
      query: GetSlider,
      variables() {
        return { locale: this.$i18n.locale };
      },
    },
  },
};
</script>

<style scoped></style>

<template>
  <section class="banner-slide">
    <VueSlickCarousel :data="sliderConfigs" v-bind="settings">
      <div
        v-for="sliderConfigs in sliderConfigs.data"
        v-bind:key="sliderConfigs.id"
        class="banner-area bg_cover d-flex align-items-center"
        :style="{
          backgroundImage: `url(
    'http://localhost:1337${sliderConfigs.attributes.sliderImage.data.attributes.url}'
  )`,
        }"
      >
        <div class="container">
          <div class="row">
            <div class="col-lg-12">
              <div class="banner-slide-number">
                <span>0{{ sliderConfigs.id }}</span>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-7">
              <div class="banner-content">
                <span data-animation="fadeInDown" data-delay=".1s">
                  <!-- <img src="/assets/images/logo_white_small.svg" alt="" /> -->
                  {{ sliderConfigs.attributes.title }}</span
                >
                <h1 data-animation="fadeInLeft" data-delay=".5s" class="title">
                  {{ sliderConfigs.attributes.subTitle }}
                </h1>
                <ContactBtn data-animation="fadeInLeft" data-delay="1s" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </VueSlickCarousel>
  </section>
</template>

同时，我正在处理的网页包含多种语言选项。2主要的问题是当我改变语言时，
出现“无法读取未定义的属性”（阅读“unobserve”）错误
但是当我刷新页面的时候，数据以一种健康的方式返回。我错过了什么吗？