1-before.vue

<script lang="ts">
import { computed, defineComponent, PropType } from "vue"
import { useStore } from "@/store/store"
import { User } from "@/store/data"

export default defineComponent({
  name: "UserItem",
  props: {
    user: {
      type: Object as PropType<User>,
      required: true,
    },
  },
  setup(props) {
    const store = useStore()

    const unreadClass = computed(() => {
      const u = store.state.unread
      return u.has(props.user.connectionId) ? "" : "inactive"
    })
    const separatorClass = computed(() =>
      store.state.currentRecipient?.connectionId === props.user.connectionId
        ? "active"
        : ""
    )
    const containerClass = computed(() => {
      const r = store.state.currentRecipient
      return r?.connectionId === props.user.connectionId ? "active" : ""
    })

    function setRecipient() {
      store.setRecipient(props.user)
    }

    return {
      separatorClass,
      unreadClass,
      klass,
      setRecipient,
    }
  },
})
</script>

2-after.vue

<script setup lang="ts">
import {computed, PropType} from "vue"
import {useStore} from "../store/store"
import {User} from "../store/data"

const props = defineProps({
  user: {
    type: Object as PropType<User>,
    required: true,
  },
})

const store = useStore()

const unreadClass = computed(() => {
  const u = store.state.unread
  return u.has(props.user.connectionId) ? "" : "inactive"
})
const separatorClass = computed(() =>
    store.state.currentRecipient?.connectionId === props.user.connectionId
        ? "active"
        : ""
)
const containerClass = computed(() => {
  const r = store.state.currentRecipient
  return r?.connectionId === props.user.connectionId ? "active" : ""
})

function setRecipient() {
  store.setRecipient(props.user)
}
</script>