老师，我尝试用setup tsx写了一下组件和插槽发现了一点问题
1.子组件有一个点击事件，点击后密码会修改，但是父组件中并没有响应，这是为什么呢？
2.在父组件使用第二种写法的时候，控制台会出现警告
Slot “default” invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.
第一种写法则不会出现警告，第二种写法应该怎么写才对呢？

子组件代码

父组件代码1

父组件代码2

子组件代码

<template>
  <Comp />
</template>

<script setup lang="tsx">
import { ref, useSlots } from 'vue'

const slots = useSlots()

const obj = ref({
  username: 'wang',
  password: '123456'
})

const handleClick = () => {
  obj.value.password += '7'
}

const Comp = (
  <div>
    <div>{slots.default({ username: obj.value.username })}</div>
    <div onClick={handleClick}>{slots.pass({ password: obj.value.password })}</div>
  </div>
)
</script>

父组件代码1

<template>
  <Comp>
    <template #default="{ username }">
      <h2>{{ username }}</h2>
    </template>
    <template #pass="{ password }">
      <h2>{{ password }}</h2>
    </template>
  </Comp>
</template>

<script setup lang="tsx">
import Comp from './Comp.vue'
</script>

父组件代码2

<template>
  <Index />
</template>

<script setup lang="tsx">
import Comp from './Comp.vue'

const Index = (
  <Comp>
    {{
      default: ({ username }) => <h2>{username}</h2>,
      pass: ({ password }) => <h2>{password}</h2>
    }}
  </Comp>
)
</script>