Popover with List Item Component not appearing

[JCharante]

Software version

Quasar: 0.13.9
OS: Ubuntu 17.04 Linux Thinky 4.10.0-21-generic #23-Ubuntu SMP Fri Apr 28 16:14:22 UTC 2017 x86_64 x86_64 x86_64 GNU/Linux
Node: 4.7.2
NPM: 3.5.2
Browsers: Google Chrome Version 58.0.3029.110 (64-bit)
iOS: N/A
Android: 6.0
Any other software related to your bug:

What did you get as the error?

Popover does not open when clicking on the more_vert icon.

What were you expecting?

Popover to open when clicking on the more_vert icon.

What steps did you take, to get the error?

Below is a template file to demonstrate the issue.

• Top Example: <q-list-item> with a popover that does not appear at all. This was the suggested fix by @rstoenescu when I showed him the middle example.
• Middle Example: <q-list-item> with a popover that opens all the way to the left regardless of where you click it
• Bottom Example: Desired Outcome (except without <q-list-item>) where the popover only appears when clicking on the more_vert icon, and the popover appears from the icon.

test.vue

<template>
    <div class="list">
        <q-list-item
            :item="{
            label: 'Popover Not Opening',
            secondIcon: 'more_vert'
        }"
            link
        >
            <q-popover ref="firstPopover">
                <div class="list">
                    <div class="item item-link" @click="$refs.firstPopover.close()">
                        <div class="item-content">Edit</div>
                    </div>
                    <div class="item item-link" @click="$refs.firstPopover.close()">
                        <div class="item-content">Delete</div>
                    </div>
                </div>
            </q-popover>
        </q-list-item>

        <hr>

        <div>
            <q-list-item
                :item="{
                label: 'Popover Not Aligned Correctly',
                secondIcon: 'more_vert'
            }"
                link
            ></q-list-item>
            <q-popover ref="secondPopover">
                <div class="list">
                    <div class="item item-link" @click="$refs.secondPopover.close()">
                        <div class="item-content">Edit</div>
                    </div>
                    <div class="item item-link" @click="$refs.secondPopover.close()">
                        <div class="item-content">Delete</div>
                    </div>
                </div>
            </q-popover>
        </div>

        <hr>

        <div class="item">
            <div class="item-content has-secondary">
                <div>Not Using q-list-item</div>
            </div>
            <div class="item-secondary">
                <i slot="target">
                    more_vert
                    <q-popover ref="thirdPopover">
                        <div class="list">
                            <div class="item item-link" @click="$refs.thirdPopover.close()">
                                <div class="item-content">Edit</div>
                            </div>
                            <div class="item item-link" @click="$refs.thirdPopover.close()">
                                <div class="item-content">Delete</div>
                            </div>
                        </div>
                    </q-popover>
                </i>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {}
        }
    }
</script>

[rstoenescu]

Hi,

QPopover works as to be triggered by the immediate DOM node encapsulating it (whichever that is). In your case, it's the entire list item. It makes sense if you think a little about it. How would the Popover (which can be applied to any DOM node or component) know which item of the list is its "target"?
To have more control over where the Popover to be triggered, use the HTML syntax version of list alone instead of the Vue component.

Example:

<div class="item">
   <div class="item-content has-secondary">
       <div>List item</div>
    </div>
    <div class="item-secondary">
       <i>
         more_vert
         <q-popover........>...</q-popover>
       </i>
    </div>
</div>

[JCharante]

So it's a design decision to not have slots for the Vue component? That's fair.