Workaround to relate Entries by Slug in Statamic, to enable use-cases like conditionally displaying CP fields based on the selected entry

cp.js

/**
 * When extending the control panel, be sure to uncomment the necessary code for your build process:
 * https://statamic.dev/extending/control-panel
 */

import EntrySlug from './components/fieldtypes/EntrySlug.vue';

Statamic.booting(() => {
    Statamic.$components.register('entry_slug-fieldtype', EntrySlug);
});

EntriesWithSlug.php

<?php

namespace App\Fieldtypes;

use Statamic\Fieldtypes\Entries;
use Statamic\Facades\Entry;

class EntriesWithSlug extends Entries {
    protected $icon = 'entries';

    public function toItemArray($id) {
        $item = parent::toItemArray($id);
        $slug = Entry::find($id)->slug;

        return array_merge($item, [
            'slug' => $slug
        ]);
    }

    public static function title(){
        return __('fieldtypes.entries_with_slug.title');
    }
}

EntrySlug.php

<?php

namespace App\Fieldtypes;

use Statamic\Fields\Fieldtype;

class EntrySlug extends Fieldtype {
    protected $icon = 'slug';
    public $categories = ['relationship'];

    /**
     * The blank/default value.
     *
     * @return string
     */
    public function defaultValue() {
        return '';
    }

    /**
     * Pre-process the data before it gets sent to the publish page.
     *
     * @param mixed $data
     * @return array|mixed
     */
    public function preProcess($data) {
        return $data;
    }

    /**
     * Process the data before it gets saved.
     *
     * @param mixed $data
     * @return array|mixed
     */
    public function process($data) {
        return $data;
    }

    public static function title(){
        return __('fieldtypes.entry_slug.title');
    }

    protected function configFieldItems(): array {
        return [
            'entries_field_handle' => [
                'display' => __('fieldtypes.entry_slug.handle.display'),
                'instructions' => __('fieldtypes.entry_slug.handle.instructions'),
                'type' => 'text',
                'default' => '',
            ],
        ];
    }
}

EntrySlug.vue

<template>
    <div>
        <text-input :value="entrySlug" disabled/>
    </div>
</template>

<script>
export default {
    mixins: [Fieldtype],
    inject: ['storeName'],

    data() {
        return {
            value: this.entrySlug || ''
        };
    },

    computed: {
        entriesFieldHandle(){
            return this.config.entries_field_handle;
        },

        store() {
            return this.$store.state.publish[this.storeName];
        },

        entriesFieldHasValue(){
            let fieldValues = this.store.values;
            return fieldValues[this.entriesFieldHandle].length > 0;
        },

        entrySlug() {
            if(!this.entriesFieldHasValue){
                return "";
            }

            let fieldMeta = this.store.meta[this.entriesFieldHandle].data[0];
            return fieldMeta.slug;
        },
    },

    watch: {
        entrySlug(newValue, oldValue) {
            this.update(newValue);
        }
    }
};
</script>