reRender slider doesnt work

[DranyValentinWork]

<VueSlickCarousel
            v-if="projects.length > 0"
            v-bind="slideSettings"
            key="carouselKey"
            ref="slick"
            class="top-projects__slider responsive"
          >
            <HomeProjectCard
              v-for="project in projects"
              :key="project.id + project.name"
              :item="project"
            />
</VueSlickCarousel>
<script>
  setup() {
    const { projects, getProjectRepositories } = useProjectRepositories();

    return {
      projects,
      getProjectRepositories,
    };
  },
  data() {
    return {
      slideSettings: {
        arrows: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        infinity: false,
      },
      carouselKey: 1,
    };
  },
  methods: {
    forceRerender() {
      this.carouselKey += 1;
    },
  },
  watch: {
    projects() {
      this.forceRerender();
    },
  },
};
<script>

By default I have more than 3 projects. Then I do filter and have only 2 projects. And when I remove filter and have more than 3 projects, then slider doesnt reRender and doesnt work.

[ybogdanq]

try to use property projects() {... , deep: true} at watcher