Rule Proposal: `vue/no-ref-object-destructure` rule

[ota-meshi]

Please describe what the rule should do:

A new rule reports usage of ref objects that can lead to loss of reactivity.

What category should the rule belong to?

[ ] Enforces code style (layout)
[X] Warns about a potential error (problem)
[ ] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

// Ref Object
const count = ref(0)
const cnt1 = count.value /* ✗ BAD */
const { value: cnt2 } = count /* ✗ BAD */
const cnt3 = computed(() => count.value /* ✓ GOOD */)
const value1 = fn(count.value) /* ✗ BAD */
const value2 = fn(count) /* ✓ GOOD */
const value3 = computed(() => fn(count.value) /* ✓ GOOD */)

// Reactivity Transform
const count = $ref(0)
const cnt1 = count /* ✗ BAD */
const cnt2 = computed(() => count /* ✓ GOOD */)
const value1 = fn(count) /* ✗ BAD */
const value2 = fn($$(count)) /* ✓ GOOD */
const value3 = computed(() => fn(count) /* ✓ GOOD */)

Additional context

I think it's useful for users who use Reactivity Transform because it prevents them from forgetting to add $$().
So it is related to Reactivity Transform #1948.

Regarding Reactive Objects, the following code loses its reactivity:

const state = reactive({ count: 0 })
const cnt1 = state.count
const { count: cnt2 } = state
const value1 = fn(state.count)

But when count is an object, it may not lose reactivity, so it's hard to report:

const state = reactive({ count: { data: 0 } })
const cnt1 = state.count
const { count: cnt2 } = state
const value1 = fn(state.count)

[FloEdelmann]

Sort of related to #1933.