上面给我的例子，我用的是普通html继承的petite-vue。用PetiteVue.createApp方式，怎么写$computed呢

如果使用PetiteVue.createApp方式创建应用程序，你可以在setup函数中使用响应式函数(ref或reactive)和计算属性(computed)来实现类似的功能。

以下是一个使用PetiteVue.createApp方式实现的例子：

<div id="app">
  <div v-for="item in filteredList" :key="item.id">{{ item.name }}</div>
  <p>符合条件的数据条数为：{{ filteredList.length }}</p>
</div>

<script type="module">
import { createApp, ref, computed } from 'https://cdn.skypack.dev/petite-vue@next'

createApp({
  setup() {
    const list = ref([
      { id: 1, name: 'apple', price: 2 },
      { id: 2, name: 'banana', price: 3 },
      { id: 3, name: 'orange', price: 4 },
      { id: 4, name: 'pear', price: 5 }
    ])
    const priceLimit = ref(3)
    const filteredList = computed(() => {
      return list.value.filter(item => item.price <= priceLimit.value)
    })

    return {
      filteredList
    }
  }
}).mount('#app')
</script>

在这个例子中，我们使用ref函数创建了两个响应式变量list和priceLimit。我们使用computed函数定义了一个计算属性filteredList，该函数返回一个新的列表，其中只包含价格小于等于3的水果。在页面中，我们使用v-for指令循环展示符合条件的水果，并在页面底部展示符合条件的数据条数。

注意，在使用PetiteVue.createApp方式创建应用程序时，我们需要使用mount方法手动挂载应用程序。