Apostrophes in assets' metadata messes up control panel

[knut-forkalsrud]

Describe the bug
I believe there is a missing HTML encoding of single quote, or something more specific to Vue. I'm not sure. The effect is that when I add an apostrophe in an asset's title the settings screen becomes messed up. Or maybe the YAML written by the asset manager isn't correct. I'll explain better in the steps to reproduce.

To Reproduce
Steps to reproduce the behavior:

1. Start with the stock install, with the demo site.
2. Go to the asset manager, open the image coffee-mug.jpg
3. Change the description to from "Coffee Mug" to "Muggle's Coffee Mug", notice the apostrophe.
4. Hit "Save"
5. Navigate to "Editing Asset Container", i.e "configure -> content -> assets" in the left side navigation. Choose the "Main Assets" to bring up the edit screen. The equivalent of going directly to http://localhost:3000/cp/configure/content/assets/main
6. Notice that the edit screen isn't populated with the details from main.yaml, and that the save button doesn't work. If you have the developer tools open you may notice an error message:

jabbascripts.js?v=2.8.12:2 Uncaught TypeError: Cannot read property 'driver' of undefined
    at AssetContainerForm.ready (jabbascripts.js?v=2.8.12:2)
    at AssetContainerForm.Sn.t._callHook (johnny-deps.js?v=2.8.12:6)
    at AssetContainerForm.e (johnny-deps.js?v=2.8.12:7)
    at AssetContainerForm.n (johnny-deps.js?v=2.8.12:6)
    at AssetContainerForm.Rn.t.$emit (johnny-deps.js?v=2.8.12:6)
    at AssetContainerForm.Sn.t._callHook (johnny-deps.js?v=2.8.12:6)
    at e (johnny-deps.js?v=2.8.12:6)
    at AssetContainerForm.t.$before (johnny-deps.js?v=2.8.12:6)
    at Dn.transition (johnny-deps.js?v=2.8.12:8)
    at Dn.mountComponent (johnny-deps.js?v=2.8.12:8)

I believe the culprit is this funny looking tag, which is not a normal HTML tag I'm used to. The value for the :container attribute is enclosed in single quotes, but also contains a single quote, i.e. the apostrophe from earlier.

    <asset-container-form :is-new="false"
                          :container='{"title":"Main Assets","path":"assets","url":"\/assets","assets":{"img\/black-bear-cubs.jpg":{"title":"Black Bear Cubs","alt":"Some black bears standing up"},"img\/coffee-mug.jpg":{"title":"Muggle's Coffee Mug"},"img\/me.jpg":{"title":"Me","alt":"Niles Peppertrout"},"img\/redwood-sign.jpg":{"title":"redwood sign"},"img\/desert.jpg":{"focus":"77-70"}},"id":"main","driver":"local"}'>

Expected behavior
The edit screen should not have Javascript errors.

Screenshots

Environment details (please complete the following information):

• Statamic Version 2.10.5
• This is an upgrade from 2.8.12
• OS: macOS 10.13.6 (17G65)
• Browser: Chrome 68.0.3440.106
• Web Server: I'm using just php -S localhost:3000 statamic/server.php
• PHP Version: 7.1.16
• Addons installed: none

Additional context
I have also reproduced it with a stock install of Statamic 2.8.12

[jackmcdade]

Nice catch! Thanks! ❤️