nested expanding not working

[kaijajan]

I'm trying to create nested sidebar using expanding component.
But nested expanding components does not work.
While the inside expanding component was opened, the outside one won't expand
Any idea to make it work?
Thanks

<expanding>
   ...some list items
  <expanding>
    ..some list items
  </expanding>
</expanding>

[kaijajan]

here is my testing code, please help for this
thanks

<template>
    <expanding v-show="show1">
      <div>
        <div>test item 1<div>
        <div>test item 2<div>
        <div>test item 3<div>
        <div>test item 4<div>
        <div>test item 5<div>
        <div>test item 6<div>
        <expanding v-show="show2">
          <div>
            <div>test item 1<div>
            <div>test item 2<div>
            <div>test item 3<div>
            <div>test item 4<div>
            <div>test item 5<div>
            <div>test item 6<div>
          </div>
        </expanding>
      </div>
    </expanding>
    <button @click="show1 = !show1">show1</button>
    <button @click="show2 = !show2">show2</button>
  </div>
</template>

<script>
import Expanding from './Expanding'

export default {
  components: {
    Expanding
  },
  data: function () {
    return {
      show1: true,
      show2: false
    }
  }
}
</script>

<style>
</style>