`FwbDropdown` content's position doesn't change with its width and height

[AnotiaWang]

When a dropdown is active and its content changed, the top of content no longer stays right below the dropdown button. In my case, there is a div (with overflow-y-auto) that contains many dropdowns. So if the dropdown at the top of the div overflows upwards, the content inside cannot be seen.

Example:

<FwbDropdown text="Dropdown" close-inside>
  <FwbListGroup>
    <FwbListGroupItem v-for="i in items" :key="i">
      {{ i }}
    </FwbListGroupItem>
  </FwbListGroup>
</FwbDropdown>

const items = ref<string[]>([])

// Click the dropdown to activate it before this timeout ends
setTimeout(() => {
  items.value.push('1', '2', '3')
}, 3000)

Before:

After:

Expected	Actual

Same issue when I remove items from the dropdown content.

[AnotiaWang]

Maybe call the calculatePlacementClasses() function in useDropdownClasses.ts when the slot content is changed? Or expose the util function and let users to decide when to refresh the position

Edit: Opened a PR to fix this, please review.