3👍
You’re absolutely correct that at some point you will need to convert your Python object into a literal that is understandable by Javascript/Vue, and yes JSON is appropriate since your data is more complex than a single value (string, number, etc).
To convert your QuerySet into a json string, a good approach is to first convert it from a QuerySet object into a list of simple dictionaries using values() and then encode this into json. Example:
import json
j = json.dumps(list(Project.objects.order_by('name')[:10].values('name','id')))
You will need to adjust the parameters to values to include the fields you are interested in, or omit them entirely to include all fields.
Alternatively, you can use a seralizer to directly encode the QuerySet.
I believe the rest of your code should work without much tweaking once you’ve gotten the JSON on the template output. You can render the json directly into the component data as you are doing or alternatively as a component property.
I will note however that the typical approach to retrieving "complex" data from Django in a JSON format is via Django Rest Framework. Using your approach for simple properties is quite fine, but when you start pulling larger datasets, you’ll realize some performance gains by having your Vue components make async requests to fetch the data. This comes at the cost of additional complexity, though (managing ajax requests/responses and state in your Vue code).
PS. I know it’s not your question, but I wanted to point out that I believe there are shortcomings to the general approach of using Vue via script tags on your Django template, most notably missing out on the ease and convenience of Single File Components (SFCs), hot-reloading, and the optimizations of webpack. Unless your project is tiny, I recommend spending a bit of time setting up such an integration; in my experience the up-front effort is well worth it. Also, the setup isn’t so tough, as I’ve written some articles describing the approach and built a cookiecutter to boostrap Vue+Django projects.
Good hacking!