fix(SelectMenu): use by prop to compare objects for selected values

[CernyMatej]

🔗 Linked issue

fixes #2028

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR fixes a bug introduced in #1349, where the by prop was not being consiederd when computing the selected values.
It also adds the possibility to combine the by prop with the value-attribute prop to compare nested objects like in the following example:

<template>
  <USelectMenu
    v-model="selected"
    :options="options"
    multiple
    value-attribute="object"
    by="id"
  />
</template>

<script lang="ts" setup>
const selected = ref([{
  id: 1,
  title: 'Hello'
}])

const options = [
  {
    key: 'id',
    label: 'ID',
    object: {         // 👈 this will be the selected value
      id: 1,             // 👈 the objects will be compared by this attribute
      title: 'Hello'
    }
  },
  {
    key: 'title',
    label: 'Title',
    object: {
      id: 2,             // 👈 the objects will be compared by this attribute
      title: 'Hi'
    }
  }
]
</script>

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[CernyMatej]

@benjamincanac Since the selected computed proeprty uses the computedAsync options to get the possible values, I initialized it to props.options so that it isn't empty during the initial render of the component to prevent a flash.
However, now that I'm thinking about it, shouldn't we just use props.options directly in the selected computed, instead of options - since we don't want to compare the model values with only the search results, but rather the whole options?

[CernyMatej]

I used options because that's what was used previously, however, unless I'm missing something, I think that props.options should have been used there as well:

Though this only affects things if someone uses asynchronous search.

[CernyMatej]

I also added the possibility to compare nested objects using the by prop when the value-attribute prop is set

Consider the following example:

<template>
  <USelectMenu
    v-model="selected"
    :options="options"
    multiple
    value-attribute="object"
    by="id"
  />
</template>

<script lang="ts" setup>
const selected = ref([{
  id: 1,
  title: 'Hello'
}])

const options = [
  {
    key: 'id',
    label: 'ID',
    object: {
      id: 1,
      title: 'Hello'
    }
  },
  {
    key: 'title',
    label: 'Title',
    object: {
      id: 2,
      title: 'Hi'
    }
  },
  {
    key: 'status',
    label: 'Status',
    object: {
      id: 3,
      title: 'Hey'
    }
  }
]
</script>

Previously (even before the introduction of the selected computed) it was not possible to combine these 2 props. This approach made sense to me, but I’m happy to hear any feedback on this.