I want to create a menu using vue and vuetify that has a chevron going up when expanded and down when not expanded

Question

I want to create a menu where the button has a chevron points up when expanded and points down when not expanded. I have tried making an @click that changes a data boolean value, but the problem with this is that when you click outside of the menu it closes the menu, but doesn't change the boolean value. I thought that I could do something with the attrs['aria-expanded'] value. The problem with this is that it changes in my console.log statement, but it won't change my html. I am new to vue, so I am not familiar with all the ins and outs of it yet. I was wondering if there was simple way to create a chevron that changes when the button was clicked. My example code is below.

<v-menu offset-y>
  <template v-slot:activator="{on, attrs}">
    <v-btn
      class="mt-6 v-btn--glow"
      color="primary"
      dark
      v-bind="attrs"
      v-on="on"
    >
      Dropdown
      <v-icon v-if="attrs['aria-expanded']" right>mdi-chevron-up</v-icon>
      <v-icon v-else right>mdi-chevron-down</v-icon>
    </v-btn>
  </template>
  <v-list>
    <v-list-item>
      <v-list-item-title>$ Fees & Rates</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>

Answer 1

I found out that there is another value on the v-slot:activator part which is value. Value is a boolean value that will change when expanded. We can use this value in the v-if expression to change the icon.

<v-menu offset-y>
  <template v-slot:activator="{on, attrs, value}">
    <v-btn
      class="mt-6 v-btn--glow"
      color="primary"
      dark
      v-bind="attrs"
      v-on="on"
    >
      Dropdown
      <v-icon v-if="value" right>mdi-chevron-up</v-icon>
      <v-icon v-else right>mdi-chevron-down</v-icon>
    </v-btn>
  </template>
  <v-list>
    <v-list-item>
      <v-list-item-title>$ Fees & Rates</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>