How to get Q-Tree and Q-PopupEdit work together?

I have this code:

<q-tree
    :nodes="data"
    node-key="id"
    :key="data.length"
    label-key="name"
    ref="refTree"
    default-expand-all
    @update:selected="updated"
>
  <template v-slot:default-header="prop">
    <div class="q-mr-md">{{ prop.node.name }}</div>
    <q-icon name="delete" color="grey-5" @click="console.log('delete id:'+prop.node.id)"/>
    <q-icon name="edit" color="grey-5" @click="console.log('edit id:'+prop.node.id)">
      <q-popup-edit v-model="prop.node.label">
        <q-input :model-value="prop.node.label" dense autofocus counter @change="v => { prop.node.label = v.target.value }"></q-input>
      </q-popup-edit>
    </q-icon>
  </template>
</q-tree>

And have two Problems:

1. If I click in the edit icon, the Popup will be show and the expanse toggle is activated. The toggle should not do. What can I do, that the mouse event only triggert the button?
2. If the Popoup shown, the Label value isn't filled in. It's empty. How can I insert the actual Value? I want to edit the name (Label) of the Tree entry

EDIT: A Playground

I found the solution. Here is the working snippet:

<q-tree
  :nodes="data"
  node-key="id"
  :key="data.length"
  label-key="name"
  ref="refTree"
  default-expand-all
  @update:selected="updated"
>
<template v-slot:default-header="prop">
  <div class="q-mr-md">{{ prop.node.name }}</div>
  <q-icon
    name="delete"
    color="grey-5"
    @click="console.log('delete id:'+prop.node.id)"
  />
  <q-icon 
    name="edit"
    color="grey-5"
    @click="console.log('edit id:'+prop.node.id)"
    @click.stop
  >
    <q-popup-edit v-model="prop.node.name" v-slot="scope">
      <q-input 
        v-model="scope.value"
        dense
        autofocus
        counter
        @keyup.enter="scope.set"
      ></q-input>
      </q-popup-edit>
    </q-icon>
  </template>
</q-tree>

The key facts are @click.stop and v-slot.