title: Vega plot not displaying within a holoviz panel in jupyter notebook
body: <p>I find the <a href="https://github.com/holoviz/panel" rel="nofollow noreferrer">holoviz panel</a> a very interesting solution to building data visualisation dashboards. Unfortunately, I have some issues getting a vega plot of a node-link diagram to work within a panel in a jupyter notebook.</p>
  
  <p>The relevant imports etc:</p>
  
  <ul>
  <li><code>import panel</code></li>
  <li><code>pn.extension()</code></li>
  <li><code>from vega import Vega</code></li>
  </ul>
  
  <p>My findings:</p>
  
  <ul>
  <li>The vega import works nicely when used outside of a panel: the Vega specification copy/pasted from <a href="https://vega.github.io/editor/#/examples/vega/force-directed-layout" rel="nofollow noreferrer">https://vega.github.io/editor/#/examples/vega/force-directed-layout</a> is visualised as it should be using <code>Vega(spec)</code> (see screenshot 1).</li>
  <li>When using <code>pn.pane.Vega(spec)</code> I get an empty space. Running the visualisation externally using <code>pn.pane.Vega(spec).show()</code> and looking at the source code, I see that the div is empty (see screenshot 2).</li>
  </ul>
  
  <p>Any help with getting this working much appreciated...</p>
  
  <p>Thank you,
  jan.</p>
  
  <ul>
  <li>screenshot 1:<a href="https://i.stack.imgur.com/OK0ci.png" rel="nofollow noreferrer">screenshot1</a></li>
  <li>screenshot 2:<a href="https://i.stack.imgur.com/oumpo.png" rel="nofollow noreferrer">screenshot2</a></li>
  </ul>
  
  <p>Here is a minimal script to show the issue:</p>
  
  <pre><code>#!/usr/bin/env python
  import panel as pn
  from bokeh.plotting import output_notebook
  from vega import Vega
  pn.extension('vega')
  output_notebook()
  
  spec = {
    "$schema": "https://vega.github.io/schema/vega/v5.json",
    "width": 400,
    "height": 200,
  
    "data": [
      {
        "name": "table",
        "values": [
          {"category": "A", "amount": 28},
          {"category": "B", "amount": 55},
          {"category": "C", "amount": 43}
        ]
      }
    ],
  
    "scales": [
      {
        "name": "xscale",
        "type": "band",
        "domain": {"data": "table", "field": "category"},
        "range": "width"
      },
      {
        "name": "yscale",
        "domain": {"data": "table", "field": "amount"},
        "range": "height"
      }
    ],
  
    "marks": [
      {
        "type": "rect",
        "from": {"data":"table"},
        "encode": {
          "enter": {
            "x": {"scale": "xscale", "field": "category"},
            "width": {"scale": "xscale", "band": 1},
            "y": {"scale": "yscale", "field": "amount"},
            "y2": {"scale": "yscale", "value": 0}
          },
          "update": {
            "fill": {"value": "steelblue"}
          }
        }
      }
    ]
  }
  
  Vega(spec) # =&gt; shows barchart =&gt; OK
  
  pn.Column(pn.panel("## Vega test"),
            pn.pane.Vega(spec),
            pn.panel("_end of test_"))
  # =&gt; shows "Vega test", then empty space, the "end of test"
  
  pn.Column(pn.panel("## Vega test"),
            pn.panel(spec),
            pn.panel("_end of test_"))
  # =&gt; shows "Vega test", then empty space, the "end of test"
  </code></pre>