Nesting x-data scope problem

[ApetweBc]

How do I achieve x-data nested x-data component? The "showSingleOrDouble" works but the inner input with click "showAddonPackages" does not work.

<div class="showpackages" x-data="{showAddonPackages:false}">
       <div x-data='{showSingleOrDouble: false}'>
                 <div>
                  <input type="radio" name="test" @click="showSingleOrDouble = false"> Single Arch Case
                    <input type="radio" name="test" @click="showSingleOrDouble = true"> Double Arch Case
                 </div>
                  <div x-show="!showSingleOrDouble">   
                        <input type="radio" name="package_type" value="1601.50" @click="showAddonPackages = true">
                        <input type="radio" name="package_type" value="1751.50" @click="showAddonPackages = false">
                    </div>
                <div x-show=showSingleOrDouble>               
                        <input type="radio" name="package_type" value="3,203" @click="showAddonPackages = true"> 
                        <input type="radio" name="package_type" value="3681.00" @click="showAddonPackages = false">
                    </div>
       </div>

        <div x-show="showAddonPackages">
                  ....items to show
         </div>
</div>

[ryangjchandler]

You cannot access parent data out of the box. If you're interested, @KevinBatdorf has a helper for this: https://github.com/alpine-collective/alpine-magic-helpers#component

[ApetweBc]

I look at it. Does it work with x-show? I see examples of using x-text only. I tried the $component like the example below, it did not work. Does the reference parent need not be wrapped around the children? I will appreciate your help. Thanks

<div class="showpackages" x-data="{showAddonPackages:false}" id="showAddonPackagesID">
       <div x-data='{showSingleOrDouble: false}'>
                 <div>
                  <input type="radio" name="test" @click="showSingleOrDouble = false"> Single Arch Case
                    <input type="radio" name="test" @click="showSingleOrDouble = true"> Double Arch Case
                 </div>
                  <div x-show="!showSingleOrDouble">   
                        <input type="radio" name="package_type" value="1601.50" @click="$component('showAddonPackagesID').showAddonPackages = true">
                        <input type="radio" name="package_type" value="1751.50" @click="$component('showAddonPackagesID').showAddonPackages = false">
                    </div>
                <div x-show=showSingleOrDouble>               
                        <input type="radio" name="package_type" value="3,203" @click="$component('showAddonPackagesID').showAddonPackages = true"> 
                        <input type="radio" name="package_type" value="3681.00" @click="$component('showAddonPackagesID').showAddonPackages = false">
                    </div>
       </div>

// This is the div I want to show
        <div x-show="showAddonPackages">
                  ....items to show
         </div>
</div>