为什么在定义了vant的变量还会报错

Question

问题遇到的现象和发生背景

  <van-search
        placeholder="请输入搜索关键词"
        v-model="value"
        shape="round"
        class="search"
      />

<van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in state" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>

问题相关代码，请勿粘贴截图

<script >
import { onMounted, reactive } from "vue";
import axios from 'axios';
export default {
  setup () {
    const state = reactive({
      images: [
        'https://img.yzcdn.cn/1.jpg',
        'https://img.yzcdn.cn/2.jpg'
      ]
    });
    onMounted(() => {
      axios.get('http://localhost:3000//banner?type=2').then((res) => {
        console.log(res);
        state.images = res.data.banners
      })
    })
    return {
      state,
      value
    };
  },
};
</script>

运行结果及报错内容

vue.runtime.esm.js?c320:619 
        
       [Vue warn]: Property or method "state" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Find> at src/views/Find.vue
       <App> at src/App.vue
         <Root>
[Vue warn]: Property or method "value" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Find> at src/views/Find.vue
       <App> at src/App.vue
         <Root>

我的解答思路和尝试过的方法

我想要达到的结果

Answer 1

使用state包裹value和images使用

<template>
  <div>
    <van-search
      placeholder="请输入搜索关键词"
      v-model="state.value"
      shape="round"
      class="search"
    />

    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in state.images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import { onMounted, reactive } from "vue";
import axios from "axios";
export default {
  setup() {
    const state = reactive({
      value: '',
      images: ["https://img.yzcdn.cn/1.jpg", "https://img.yzcdn.cn/2.jpg"],
    });
    onMounted(() => {
      axios.get("http://localhost:3000//banner?type=2").then((res) => {
        console.log(res);
        state.images = res.data.banners;
      });
    });
    return {
      state
    };
  },
};
</script>